【Innocentカスタマイズ】コピペでパンくずリストを追加してアイコンフォントで見た目を変更しました

このブログのテーマにはInnocentを使用させて頂いています。シンプルで私好みですが、ちょこちょこデザインなどをカスタマイズしていきたいと思います。今回はSEO的にあったほうがいいというパンくずリストを追加しました。ついでにアイコンフォントを使ってカテゴリ表示の見た目を変更しています。

f:id:galibaldi:20160313205632j:plain

「気づき」というカテゴリの前にカテゴリを示すアイコンフォントを追加し、カテゴリの下にパンくずリストを追加しています。

以下の記事で紹介されている方法をそのままコピペするだけです。

このままではカテゴリの最後に">"マークが表示されてしまうので、デザインCSSに以下を追加します。最後の一行はカテゴリを細線を消すためのものなので、この次に書いているアイコンフォントの追加をしない場合は不要なのでご注意ください。

.categories a{
    display: inline-block;
    float: none;
    margin-right: 0;
    border:none;
}

こちらはInnocent作者様のブログにて説明されいるやり方です。なぜこうする必要があるのかまで知りたい人は読んでみてください。他にもカスタマイズのやり方を紹介する記事を書かれており、非常に参考になります。

デフォルトのままだと、カテゴリは細線で囲まれています。ここがカテゴリであることが分かりやすいように、アイコンフォントを追加します。デザインCSSに以下をコピペします。

.categories a:before{
    font-family: blogicon;
    content:'\f04a';
    margin-right: 0.5em;
}

最後の一行は、カテゴリのアイコンとカテゴリの文字の隙間を空けるための設定です。これは0.5文字分ですがお好みで調整してください。カテゴリを囲む細線が無くなっているので、カーソルを重ねた時の設定も変更するべきな気もしますが今回はそのままです。

他にどんなアイコンフォントが使えるか気になる方は以下の記事が参考になります。

知りたい情報を公開してくださっている方がいるおかげで、CSSが分からない私でもコピペでカスタマイズすることができました。感謝しつつ、自分も誰かの役に立つ情報を発信していきたいですね！

エンジニアは立ち止まれない