はてなブログでは、ブログの画面表示について、いろいろ表示上のカスタマイズをすることができます。
ブログのカスタマイズをするとき、アイコンを使ってカスタマイズして、おしゃれな表示にしたいと考えたことはありませんか？
でもどうやったらできるのかよくわからないという方もいらっしゃると思います。
そこで、今回はわたしもしている、サイドバーにアイコンを表示させるカスタマイズについてご紹介します。
- はてなブログユーザー初心者
- サイドバーの見た目をおしゃれにデザインしてみたい方
- サイドバーの見た目をデザインする
- サイドバーに無料のアイコンフォントを表示しておしゃれに見せる
- CSSを利用してサイドバーにアイコンフォントを表示する方法
- アイコンを変更したくなったらいつでも変更できる
- サイドバーにアイコンフォントを表示してブログをおしゃれにしよう！
サイドバーの見た目をデザインする
今回のカスタマイズは、サイドバーに表示されているタイトルに、はてなブログで無料で利用できるアイコンをつけるというものです。
利用されているデザインテーマによっては、すでにアイコン利用が設定済みで変更できないなど、この記事に記載の方法そのままでは利用できないこともあります。あらかじめご了承ください。
なお、デザインCSSの内容を変更することになりますので、事前にCSSのデータバックアップを取ってから、ご自身の判断でお試しください。
サイドバーに無料のアイコンフォントを表示しておしゃれに見せる
カスタマイズ後のサイドバーの表示イメージはこちらです。
サイドバーのタイトルの前にタイトルをイメージさせるアイコンをつけます。
CSSを利用してサイドバーにアイコンフォントを表示する方法
サイドバーにアイコンをつけるには、CSSと、はてなブログの無料で使える標準アイコンフォントを利用します。
デザインCSS（ダッシュボードから、＞デザイン＞カスタマイズ＞デザインCSSに進み、デザインCSSにコードを入力する部分）に次のコードを追記してください。
貼り付けるCSSコード
/*各タイトルにはてなアイコン設定*/
.hatena-module-title::before {
color: black ;
content: "\f02d";
font-family: blogicon;
font-style: normal;
font-weight: normal;
vertical-align: top;
}
.hatena-module-profile .hatena-module-title:before {
content: "\f000"; /*プロフィール*/
}
.hatena-module-recent-entries .hatena-module-title:before {
content: "\f00f"; /*最新記事*/
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
content: "\f033"; /*注目記事*/
}
.hatena-module-search-box .hatena-module-title:before {
content: "\f01a"; /*検索*/
}
.hatena-module-archive .hatena-module-title:before {
content: "\f03a"; /*月別アーカイブ*/
}
.hatena-module-category .hatena-module-title:before {
content: "\f024"; /*カテゴリ*/
}
.hatena-module-circles .hatena-module-title:before {
content: "\f021"; /*参加グループ*/
}
.hatena-module-html .hatena-module-title:before {
content: "\f03e"; /*HTML*/
}
文字の色を変える場合は、上記コードの赤色の部分（black）を他の色に変更してください。
. や ; など、コードの一部が1文字でも欠けるとうまく表示されません。ご注意ください。
CSSコードを貼り付ける場所
ダッシュボードから、デザインを選択してください。
デザイン＞カスタマイズ＞デザインCSSの順にクリック・選択してください。
デザインCSSをクリックし、詳細画面が表示されたら、コードの最後にコピペしたCSSコードを追加してください。
この際、既存のCSSコードは絶対に消去しないでください。
CSSコードの情報を追記後、「変更を保存する」ボタンをクリックして情報を保存してください。
アイコンを変更したくなったらいつでも変更できる
CSSの設定が完了したら、プレビューなどで表示状態を確認してください。
なお、各タイトルにつけるアイコンは、アイコンのコードで指定しています。
例えばプロフィールで使用しているアイコンを変更する場合は、content: "\ f000"; の赤色の部分に、対応するアイコンのコードを設定します。一度決めた後でも、任意のものに変更できます。
アイコンとアイコンコードの対応表は、こちらの記事を参考にしてください。
サイドバーにアイコンフォントを表示してブログをおしゃれにしよう！
ちょっとしたカスタマイズですが、アイコンフォントによる表示の導入により、ブログ画面の親しみやすさが向上するかもしれません。
アイコンの表示をやめたくなったら、この記事で追加したコードを削除すれば元の表示にもどすことができます。
ブログのカスタマイズのお役に立てれば幸いです。
お試しください😊
