みやもとブログ

好きなものの感想などを書いています。読書、ラジオ、資格、Notionなど。

目次
目次

【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる(Font Awesome)

この記事をシェアする

数日前から適用していますが、サイドバーのアイコンを変更してみました。
今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。

miya-moto-blog.hatenablog.com

せっかくFont Awesomeのアイコンが使えるので、サイドバーのアイコンも変更してみようと思った次第です。

それではサクッと本題へ。

変更内容(画像)

まずは変更前後の画像を載せます。

サイドバーの項目は10個くらいあるのですが、その中からピックアップして何個か載せます。

左が変更前、右が変更後です。

プロフィール

最新記事

サイドバーのアイコンを全て変更してみました。
ただ、そこまで大きな変化はないかなと思います。

「それっぽさ」という意味では変更前後でそれほど印象は変わらないかなと。
ただなんとなく、Font Awesomeのアイコンの方がシンプルな印象があります。

参考サイト

web-manabu.com

こちらのサイトにFont Awesomeの対象バージョンのアイコン一覧が載っていました。
こちらを見ながらそれっぽいアイコンを探しました(前回の記事と同様)。

大変参考になりました。ありがとうございます。

適用したCSS

/***サイドバー:アイコン***/
/*全体*/
.hatena-module-title:before {
    position: static;
    border: none;
}
/*プロフィール*/
.hatena-module-profile .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f2c0";
}
/*固定ページ*/
.hatena-module-links .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f0c1";
}
/*検索*/
.hatena-module-search-box .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f002";
}
/*カテゴリ*/
.hatena-module-category .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f114";
}
/*注目記事*/
.hatena-module-entries-access-ranking .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f006";
}
/*最新記事*/
.hatena-module-recent-entries .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f017";
}
/*関連記事*/
.hatena-module-related-entries .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f00c";
}
/*月別アーカイブ*/
.hatena-module-archive .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f133";
}
/*HTML*/
.hatena-module-html .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f0eb  ";
}
/***サイドバー:アイコンここまで***/

上記のCSSを適用すると、アイコンが設定されます。

デザインの適用手順

一応、適用手順を載せておきます。


STEP
ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック
STEP
「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック
STEP
上述のCSSをコピペする(既存のCSSは消さずに)
STEP
「変更を保存する」をクリック
STEP
デザインが変更されているか確認する
デザインが変更されなかったり、変になっている場合は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。

注意事項

はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。

今使っているSilenceというデザインテーマに追加でCSS適用した形となります。

他のデザインテーマを使っている場合や、他にもCSSやJSを埋め込んでいる場合はうまく動かない可能性があります。
もし今回記載のCSSを適用しようとしている場合、その辺りご了承ください。

おわりに

ということで、「サイドバーのアイコン変更(Font Awesome)」に関してアレコレ書いてみました。

Font Awesomeが使えるようになったので、せっかくなので変えてみようくらいの気持ちで変えてみました。
結果的に変更前後でそれほど大きな変化はなかった気もしますが、一度変更を始めてしまうと戻すのもちょっと面倒だなと。

ちなみに変更前のアイコンは、こちらの記事で詳しく書いています。

miya-moto-blog.hatenablog.com

またなにかブログカスタマイズしたら記事にします。

TOP HOME