Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

🍀 Pop Categories 🍀

Blog

Mobile

Gadget

Travel

🌱  New Articles  🌱

ブログデザイン|アイコンを表示してサイドバーをおしゃれに!CSSコピペOK

f:id:simplelifenavigation:20210711051943j:plain

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

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

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

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

 

サイドバーの見た目をデザインする

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

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

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

 

simplelifenavigation.com

 

サイドバーに無料のアイコンフォントを表示しておしゃれに見せる

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

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

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

 

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)を他の色に変更してください。

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

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

 

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

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

 

デザイン画面

 

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

デザインCSS

 

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

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

 

デザインCSS詳細

 

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

 

アイコンを変更したくなったらいつでも変更できる

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

 

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

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

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

simplelifenavigation.com

 

サイドバーにアイコンフォントを表示してブログをおしゃれにしよう!

カスタマイズする

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

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

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

お試しください😊