Simple Life Navi - シンプルライフなび

日常の気になったことやブログ運営などに関することを中心に、シンプルな生活や投資関連情報、アニメや動画、書籍、文房具などのことを書き綴る雑記ブログです。

Life

COVID-19

Gadget

Movie

最新記事以外に、トップページの記事もぜひご覧ください!

はてなブログ|サイドバーのタイトルにアイコンを表示するカスタマイズ方法

f:id:simplelifenavigation:20210711051943j:plain

はてなブログでは、ブログの画面表示について、いろいろ表示上のカスタマイズをすることができます。

ブログのカスタマイズをするとき、アイコンを使って表示させてみたいと考えたことはありませんか?でもどうやったらできるのかよくわからないという方もいらっしゃると思います。

そこで、今回はわたしもしている、サイドバーにアイコンを表示させるカスタマイズについてご紹介します。

この記事はこんな方におすすめ
  • はてなブログユーザー初心者
  • サイドバーのデザインを少し変更してみたい方

 

はじめに

今回のカスタマイズは、サイドバーに表示されているタイトルに、アイコンをつけるというものです。

利用されているデザインテーマによっては、すでにアイコン利用が設定済みで変更できないなど、この記事に記載の方法そのままでは利用できないこともあります。あらかじめご了承ください。

なお、デザインCSSの内容を変更することになりますので、事前にCSSのデータバックアップを取ってから、ご自身の判断でお試しください。

 

simplelifenavigation.com

 

サイドバーにアイコンを表示する

カスタマイズ後のサイドバーの表示イメージはこちらです。

サイドバーのタイトルの前にアイコンをつけます。

サイドバーにアイコンを表示

 

サイドバーにアイコンをつける方法

サイドバーにアイコンをつけるには、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)を他の色に変更してください。

色見本→WEB色見本 原色大辞典 - HTMLカラーコード

. や ; など、コードの一部が1文字でも欠けるとうまく表示されません。ご注意ください。

 

CSSコードを貼り付ける場所 

ダッシュボードから、デザインを選択してください。

 

デザイン画面

 

デザイン>カスタマイズ>デザインCSSの順にクリック・選択してください。

デザインCSS

 

デザインCSSをクリックし、詳細画面が表示されたら、コードの最後にコピペしたCSSコードを追加してください。

この際、既存のCSSコードは絶対に消去しないでください。

 

デザインCSS詳細

 

CSSコードの情報を追記後、「変更を保存する」ボタンをクリックして情報を保存してください。

 

アイコンを変更する方法

CSSの設定が完了したら、プレビューなどで表示状態を確認してください。

 

なお、各タイトルにつけるアイコンは、アイコンのコードで指定しています。

例えばプロフィールで使用しているアイコンを変更する場合は、content: "\ f000"; の赤色の部分に、対応するアイコンのコードを設定します。

アイコンとアイコンコードの対応表は、こちらの記事を参考にしてください。

simplelifenavigation.com

 

サイドバーにアイコン表示のまとめ

カスタマイズする

ちょっとしたカスタマイズですが、アイコンフォントによる表示の導入により、少し画面の親しみやすさが向上するかもしれません。

アイコンの表示をやめたくなったら、この記事で追加したコードを削除すれば元の表示にもどすことができます。

ブログのカスタマイズのお役に立てれば幸いです。

お試しください😊