ブログデザイン変更：テーマ「Innocent」へ変更＋その他追加で行ったことのまとめ

Innocentの導入

ブログのデザインを見直しました。

目的：ブログのブラッシュアップ

ブログのテーマを変更しました。今回はそれ関係で行った作業について書いていきます。
ちなみに変更前のデザインはこちら
（以前使用したタブレット画像なのはご勘弁ください）

ブログテーマBrooklyn

デザインテーマの変更

これまでブログのデザインテーマはテーマストアの「Brooklyn」を使わせてもらっていましたが、より癖のないデザインにしたくて同じくテーマストアの「Innocent」に変更しました。このテーマはシンプル且つフラット、更にカスタマイズがしやすいという素晴らしいテーマです。
実際、少し弄った感じとても使いやすいと感じました。また、テーマが改変可能かどうか、ライセンスについて解説があったのもこのテーマに変える上で大きなポイントでした。
（詳細は作者様の下記ポストを確認して下さい）

moonnote.hateblo.jp

こういったライセンス関係は見落としがちなので、安心して細かい部分の変更が行えるのはありがたいです。

ナビゲーションバーの設置

最近のブログではよく見るナビゲーションバーですが、当ブログもブログ上部に設置しました。このナビゲーションバーもテーマ「Innocent」でサポートされています。

moonnote.hateblo.jp

ナビゲーションバーのカスタマイズ

デフォルトのナビゲーションバーはマウスオーバーで文字色が変わるだけだったので、背景色の変更とアイコンを追加してボタン感を増加させました。

20160627222531

ナビゲーションバーのデザインを弄る場合、赤枠のデザインCSSに追加します。

ハイライト表示の実装

次のコードをデザインCSSに記述します。

/* ナビゲーションバーリンクホバー色変更 */
.menu-toggle:hover,
.main-navigation a:hover {
    background: #303030;
}

このコードは、ナビゲーションバーのハイパーリンク付きの項目に対してマウスオーバーした時の書式指定になります。元々のテーマにも同一の記述がありますが、cssに記入することで上書きされます。(上書きされる以外の部分はそのまま)

アイコンの表示

次にアイコンを表示させる方法です。ナビゲーションバーにアイコンを表示する方法は、はてなブログにアイコン画像をアップロードしてナビゲーションバーの<a>タグでアイコンの<img>タグを挟むだけです。以下のコードを参考にしてください。

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="http://www.reclog.net/"><img～> ホーム</a></li>
            <li><a href="http://www.reclog.net/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"><img～> プログラミング</a></li>
            <li><a href="http://www.reclog.net/archive/category/%E8%B6%A3%E5%91%B3"><img～> 趣味</a></li>
            <li><a href="http://www.reclog.net/entry/2016/06/13/011456"><img～> プロフィール・連絡先</a></li>
            <li><a href="#"><img～></a></li>
        </ul>
    </div>
</nav>

Innocentナビゲーションバー

組み込み後確認すると、アイコンが文字のとなりに表示されるはずです。画像と文字が近すぎる場合は、文字側に半角スペースを入れる等して調整すると良いです。

icooon-mono.com

ちなみに、使用したアイコンはここの素敵アイコンを使わせて貰いました。アイコンサイズや色を自由に指定可能な素晴らしいアイコンが多数あります。

ブログのタイトル色変更

ブログのタイトルの背景色もデフォルトの白から変更しました。

/* ブログタイトル背景色変更 */
#blog-title {
    background:#222;
}

/* ブログタイトル文字色 */
#title a,
#title a:hover {
    color: #FFF;
}

/* ブログ説明文 */ 
#blog-description {
    color: #AAA;
}