【特典】コブクロ配信ライブお得情報【10/3開催】

【サイドバー】ウィジェッドのタイトル前にアイコンを表示させる方法【コピペで簡単】

ブログのカスタマイズに悩む人

サイドバーのウィジェッドのタイトルにアイコンを表示させたいんですが、やり方が分かりません。

分かりやすく教えて下さい!

 

今回はこんな悩みを解決していきたいと思います!

 

ザッキー

今回のアイコンを表示させるカスタマイズは、めっちゃ簡単でコピペでOKです!

 

この記事で分かること

・サイドバーのウィジェッドのタイトル前にアイコンを表示する方法

・好きなアイコンに変更する方法

 

今回お伝えするカスタマイズで、出来るのはこんなイメージ↓

 

では早速、カスタマイズ方法をみていきましょうー!

ウィジェッドのタイトル前にアイコンを表示させる方法

方法はとっても簡単!

 

まず先にサイドバーに「カスタムHTML」のウィジェッドを配置しておきましょう!

「カスタムHTML」のウィジェッドは、プロフィールやメニューなど色々と使えて便利ですね(´∀`)

 

CSSのコピー

まずは、以下のCSSをコピーします!(+ボタンを押すと表示できます)

.sidebar #custom_html-6 .widgettitle:before {
content: “\f3c5”;
}

 

CSSコードの貼り付け手順

コピーできれば、以下の手順でCSSコードを貼り付けいていきます!

STEP.1
トップページ

トップページへいきます

STEP.2
カスタマイズ

「カスタマイズ」をクリックします

STEP.3

「追加CSS」をクリック

STEP.4
コードの貼り付け

先ほどコピーしたCSSコードを貼り付けます

STEP.5
完了
公開にすれば、以上で完了です!

サイドバーのタイトル前にアイコンが表示されていればOKです!

 

どうですか?♪( ´▽`)

上手くウィジェットのタイトル前にアイコンが表示できましたか?

キャッシュの削除は必須
カスタマイズしても上手く表示されていない場合は、まずはキャッシュを削除して確認してください!

好きなアイコンに変更する方法

ブログのカスタマイズに悩む人

サイドバーのウィジェッドのタイトル前にアイコンを表示させることが出来ました!

でも違うアイコンに変更したいです!

 

お伝えしたカスタマイズでは、アイコンが「」になっています。

この「」のマップマークを好きなアイコンに変更していきましょうー!

 

方法は以下の通り!

Font Awesomeへアクセス

まずは【Font Awesome】へアクセスします。

Font Awesome 公式サイトへ

 

「Icons」をクリックします。

 

アイコンの検索の画面に移りますので、「Free」を選択します。(無料で使える範囲で十分です!)

検索窓に希望のアイコン名を英語で入力します!

希望のアイコンが見つかれば、クリック!

 

希望のアイコンを選択すると、詳細画面に移ります。

赤枠内の「f ◯◯」の部分をコピー!

 

CSSコードの書き換え

ここからは、「サイドバーのウィジェッドのタイトル前にアイコンを表示する方法」と手順はほとんど一緒です。

 

以下のCSSコードの赤線の部分を、先ほどコピーした希望アイコンの数式(f ◯◯の部分)に置き換えます!

 

後は書き換えたCSSコードを貼り付ければ、完了です♪

 

CSSコードの貼り付け手順

コピーできれば、以下の手順でCSSコードを貼り付けいていきます!

STEP.1
トップページ

トップページへいきます

STEP.2
カスタマイズ

「カスタマイズ」をクリックします

STEP.3

「追加CSS」をクリック

STEP.4
コードの貼り付け

先ほどコピーしたCSSコードを貼り付けます

STEP.5
完了
公開にすれば、以上で完了です!

サイドバーのタイトル前にアイコンが表示されていればOKです!

 

どうですか?♪( ´▽`)

上手く好きなアイコンが表示できましたか?

キャッシュの削除は必須
カスタマイズしても上手く表示されていない場合は、まずはキャッシュを削除して確認してください!

おわりに

今回は、サイドバーのウィジェッドのタイトル前にアイコンを表示する方法、好きなアイコンに変更する方法についてお伝えしました。

 

お伝えした方法は、初心者の方でコピペで出来るので簡単だったと思います◎

どんどんサイドバーのウィジェットのタイトルにアイコンを表示させて、お洒落なブログにしていきましょう♪♪

 

最後までお読み頂きありがとうございました!