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

アイコンの変更と位置調整

アイコンをカスタマイズ

Before

サイドバーのアイコンを変更する前

After

サイドバーのアイコンを変更した後

サイドバーのアイコンをカスタマイズする準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

サイドバーのアイコンを選ぶ

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

アイコンのサイト

Font Awesomeというサイトに行って変更したいアイコンを見つけます。PORIPUを使っている方はver5.0以上も使用することができます。

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

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

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

コードを追記するための方法は3つ

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

サイドバーのアイコンを調整するカスタマイズのコード

コメントありのカスタマイズコード

コメントなしのカスタマイズコード

カスタマイズコードの説明

アイコンを変更するときはここ

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


サイドバー人気記事のアイコンを変更するときはここ
変更前
変更後

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

クラス名とは
正確にはクラスセレクタと言います。ホームページ上の要素(この記事ではサイドバーのカテゴリー部分)には、名前がついています。その付け方の1つがクラスセレクタです。

カスタマイズがうまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

まとめ:アイコンの変更と位置調整のカスタマイズ

追加CSSのまとめ

サイドバーのアイコンを変更、位置調整してみました。

アイコンの変更にはFont Awesomeのページからあらかじめ、アイコンのコードをコピーしておく必要があります。

位置調整はpaddingを使って微調整して、自分好みの位置にアイコンを配置してみました。

MENくん

サイドバーのアイコンが変わると、ちょっとだけオリジナル感がでますね