SANGOのサイドバーのタイトルにあるアイコンを変更・位置調整するカスタマイズ

カスタマイズする準備

アイコンを選ぶ

サイドバーに表示するアイコンはFont Awesomeというサイトで探すことができます。

アイコンは” f “から始まるコードが重要です。このコードをコピーしておきましょう。

ぼくはPORIPUを使っているので、ver5.0のアイコンにしました。好きなアイコンを選んでコードをコピーしておきましょう。

自分の好きなアイコンをいっぱい選べるよ

３つのコード追加方法

カスタマイズのコード

コメントあり

/*--------------------------------------
  アイコンの変更と位置調整
--------------------------------------*/
.sidebar .widget_categories .widgettitle:before {
    content: "\f542";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

コメントなし

.sidebar .widget_categories .widgettitle:before {
    content: "\f542";
    padding-right: .7em;
    padding-left: .3em;
}

コードの説明

    content: "\f542";

２行目のf542の部分をお好きなアイコンのコードに変更してください。

.sidebar .widget_categories .widgettitle:before {/*カテゴリのアイコン*/

.sidebar .my_popular_posts .widgettitle:before {/*人気記事のアイコン*/

１行目のクラス名を変更します。

うまくいったか確認

まとめ・雑談

もともとはみんな同じアイコンがあるよね

そやなカテゴリーとかはみんな同じアイコンだな

みんなと同じじゃオリジナリティがね、出せないんだよ

お…おぉ…だからアイコン変えたの？

そう！まずは手始めに細かいところを変えてみた！