Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

【はてなブログ】DUDEを元にブログカスタマイズ完了【初心者】

f:id:life-is-bitter:20160504194521p:plain

ようやくブログのカスタマイズが一段落。
紙媒体のようにIllustrator上で自由にレイアウトできるわけではないので、WEB屋さんではない私にはなかなか至難の業でした。CSSめ…。Chromeの検証機能にはお世話になりました。

ブログテーマは人気の「DUDE」を使用しているのですが、備忘録がてら行ったカスタマイズをまとめておきます。ブログをはじめたばかりの方などは参考になるのではないでしょうか。

1. ロゴ

f:id:life-is-bitter:20160504183017p:plain

まずはロゴから。デフォルトであるブラウザ上のテキストベースだと何だか味気ないので、ロゴを作ってSVG画像で表示させています。コンセプトは「シンプルおしゃれ」。このロゴの前には別のロゴタイプがあったのですが、ふとダセえなと思ってしまったのでなかったことになりました。

ちなみに「LIFE IS BITTER」のロゴタイプの部分のフォントは「Aperçu Bold」で、下のバイラインの部分は「Baskerville 10 Pro Bold」です。Aperçuはかわいくていいフォントですね。DINやHelvetica、Neue Haas Unicaほど堅い印象でなく、Brandon Grotesqueほどふざけていない、けどかわいいというか。大文字組みのときに大活躍。

SVG表示に関してはこちらの記事にまとめてあります。表示解像度の問題があるのでできればSVGの方がぱきっとしたデザインになるかと思います。

また、ろくぜうどんさん(id:rokuzeudon)からのコメントでSVG画像をロゴに設定することができたのですが、以下のコードをCSSに貼り付ければOKです。ろくぜうどんさん、ありがとうございました。

div#blog-title-inner{
background-image: url('SVGのURL') !important;
}

!importantのおかげでこちらのコードを優先しているみたいですね。勉強になります。

2. グローバルナビゲーション

f:id:life-is-bitter:20160504190019p:plain

DUDEのそのままの設定では無いグローバルナビゲーション。直帰率が結構高かったので設置しました。あとレイアウト的にあったほうが締まるし。以下のHTMLとCSSをコピペすればできるかと思います。あ、ちなみにリンクはご自身のサイトのものに変えてくださいね。

HTML

<nav id="global">
<ul style="
padding-left: 0px;
">
<li><a href="URL">カテゴリ名1</a></li>
<li><a href="URL">カテゴリ名2</a></li>
<li><a href="URL">カテゴリ名3</a></li>
<li><a href="URL">カテゴリ名4</a></li>
<li><a href="URL">カテゴリ名5</a></li>
<li><a href="URL">カテゴリ名6</a></li>
<li><a href="URL">カテゴリ名7</a></li>
<li><a href="URL">カテゴリ名8</a></li>
</ul>
</nav>

CSS

#top-editarea {
width: 1100px;
text-shadow: inherit;
margin:0 auto; }
#global ul{
list-style: none;
width: 100%;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 0.1em;
background: #000; /* Old browsers */
}
#global ul li{
display: inline-block;
}
#global ul li a{
display: inline-block;
padding: 0.75em 1.2em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#global ul li a:hover{
color: #a8a8a8;
}

また、フォントに関してはGoogle Fontsを使用してデフォルトから変えてあります。WEBフォントに関しては以下の記事にまとめてあります。

3. SNSフォロー&シェアボタン

f:id:life-is-bitter:20160504192553p:plain

f:id:life-is-bitter:20160504192604p:plain

標準でついているソーシャルとシェアのボタンは表示までに結構時間がかかって重いのでshunさんのコードを使わせていただきました。きれい。PCとスマートフォンともに設置しました。以下から詳細を。

4. 関連記事

f:id:life-is-bitter:20160504193340p:plain

直帰率が高いのでこちらの関連記事表示も設置。いろいろあるみたいですけどMilliardを利用しました。これで回遊してくれるといいなあ。

また、2列できれいに表示する方法については以下の記事を参考にしました。

5. 記事タイトルのフォント

f:id:life-is-bitter:20160504194104p:plain

游ゴシックやヒラギノだと何だか安っぽくて、記事のタイトルをAdobe Typekitを利用して見出ゴに変えました。ただ、少々表示が遅いのが難点。あとちゃんと表示されなかったりすることも…。PCとスマートフォン両方に反映されます。設定の仕方は以下の記事より。

最後に

ざっとこんなものでしょうか?
デザインをもっとこうしたい!という意志はあるのですが、コーディングの壁がデカすぎて今のところこれで落ち着いてます。WordPressの方がもっと自由にカスタマイズできるのでちょっとそれはうらやましかったり…。

シュッとレイアウトしてパッと実装できたりしないもんかなあ。