ブログのカスタマイズに悩む人
サイドバーのウィジェッドのタイトルにアイコンを表示させたいんですが、やり方が分かりません。
分かりやすく教えて下さい！
今回はこんな悩みを解決していきたいと思います！
ザッキー
・サイドバーのウィジェッドのタイトル前にアイコンを表示する方法
・好きなアイコンに変更する方法
今回お伝えするカスタマイズで、出来るのはこんなイメージ↓
では早速、カスタマイズ方法をみていきましょうー！
もくじ
ウィジェッドのタイトル前にアイコンを表示させる方法
方法はとっても簡単！
まず先にサイドバーに「カスタムHTML」のウィジェッドを配置しておきましょう！
「カスタムHTML」のウィジェッドは、プロフィールやメニューなど色々と使えて便利ですね(´∀｀)
CSSのコピー
まずは、以下のCSSをコピーします！(＋ボタンを押すと表示できます)
.sidebar #custom_html-6 .widgettitle:before {
content: “\f3c5”;
}
CSSコードの貼り付け手順
コピーできれば、以下の手順でCSSコードを貼り付けいていきます！
トップページへいきます
「カスタマイズ」をクリックします
「追加CSS」をクリック
先ほどコピーしたCSSコードを貼り付けます
サイドバーのタイトル前にアイコンが表示されていればOKです！
どうですか？♪( ´▽｀)
上手くウィジェットのタイトル前にアイコンが表示できましたか？
好きなアイコンに変更する方法
ブログのカスタマイズに悩む人
サイドバーのウィジェッドのタイトル前にアイコンを表示させることが出来ました！
でも違うアイコンに変更したいです！
お伝えしたカスタマイズでは、アイコンが「」になっています。
この「」のマップマークを好きなアイコンに変更していきましょうー！
方法は以下の通り！
Font Awesomeへアクセス
まずは【Font Awesome】へアクセスします。
「Icons」をクリックします。
アイコンの検索の画面に移りますので、「Free」を選択します。(無料で使える範囲で十分です！)
検索窓に希望のアイコン名を英語で入力します！
希望のアイコンが見つかれば、クリック！
希望のアイコンを選択すると、詳細画面に移ります。
赤枠内の「f ◯◯」の部分をコピー！
CSSコードの書き換え
ここからは、「サイドバーのウィジェッドのタイトル前にアイコンを表示する方法」と手順はほとんど一緒です。
以下のCSSコードの赤線の部分を、先ほどコピーした希望アイコンの数式(f ◯◯の部分)に置き換えます！
後は書き換えたCSSコードを貼り付ければ、完了です♪
CSSコードの貼り付け手順
コピーできれば、以下の手順でCSSコードを貼り付けいていきます！
トップページへいきます
「カスタマイズ」をクリックします
「追加CSS」をクリック
先ほどコピーしたCSSコードを貼り付けます
サイドバーのタイトル前にアイコンが表示されていればOKです！
どうですか？♪( ´▽｀)
上手く好きなアイコンが表示できましたか？
おわりに
今回は、サイドバーのウィジェッドのタイトル前にアイコンを表示する方法、好きなアイコンに変更する方法についてお伝えしました。
お伝えした方法は、初心者の方でコピペで出来るので簡単だったと思います◎
どんどんサイドバーのウィジェットのタイトルにアイコンを表示させて、お洒落なブログにしていきましょう♪♪
最後までお読み頂きありがとうございました！
