アイコンフォントを使ってはてなブログにいい感じのメニューバーをつける
今回のデザイン変更で久しぶりにメニューバー（ナビゲーションバー）を復活させました。
▼これです
こいつをどうやって作ったかメモしておきます。
アイコンフォント
それぞれの項目のアイコンはアイコンフォントなるものを使っています。画像ではなくHTMLやCSSだけで実装できるので手軽で軽量*1みたいです。ちなみにFont Awesomeを使ってます。こういうのは王道から入りたいタイプ。
参考 楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
はてなブログの場合は、
ブログの設定＞詳細設定＞headに要素を追加 に
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
を追加すれば使えるようになります。
HTML
つづいてHTML。
アイコンを表示したい場合は
<i class="fa fa-home"></i>
のように書きます。
使うアイコンはFont Awesome Iconsから探します。個別ページでHTMLを取得できるのでそちらを参考に。
で、それを使ってメニューバーを作ります。
ダッシュボード＞デザイン＞ヘッダ＞タイトル下 に
<div id="nav"> <ul> <li><a href='/' title='Home'><i class="fa fa-home"></i></a></li> <li><a href='/entry/about' title='About'><i class="fa fa-info"></i></a></li> <li><a href='/archive' title='Archive'><i class="fa fa-archive"></i></a></li> <li><a href='http://akio6o6.hateblo.jp/feed' target='_blank' title='RSS'><i class="fa fa-rss"></i></a></li> <li class='last'><a href='https://twitter.com/akio6o6' target='_blank'><i class="fa fa-twitter" title='Twitter'></i></a></li> </ul> </div>
を追加すればOK。
項目はあんまり多いとややこしくなるので、少なめにした方がいいと思います。
あと、aタグにtitele要素をつけてアイコンにカーソルを合わせると説明が出るようにしました。本来アイコンだけでなく文字もつけた方が親切なんでしょうけど、スマホで見た時ウザかったのでこういう形にしました。*2
CSS
このままだとただ縦に並ぶリスト表示なのでCSSで見た目を調整します。
デザイン＞デザインCSS に
#nav {
padding: 0 0 0 0;
text-align: center;
display: block;
font-size: 16px;
}
#nav ul { padding: 0; margin: 0; }
#nav ul li {
display: inline-block;
width: 50px;
text-align: center;
}
#nav ul li a {
display: inline-block;
color: #434343;
width: 100%;
}
#nav ul li a:hover {
color: #47a89c;
}
を追加して完成！
サイズや幅はノリで決めてますｗ ホバーの色はevergreenのリンクの色に合わせました。
こういうのはTHE・自己満の世界ですけど、自分の庭をいじる喜びに似たものがあって楽しいです。
それで読者さんが読みやすくなるならなおよし。いやそこを第一に考えろよって話ですが、誰もが読みやすくそれでいて目を引くデザインなんてないので、それなら自分の好みにした方がいいかなぁと。このブログを一番読むのはおそらく自分ですしね。
