SimplicityのウィジェットにFontAwesomeでアイコンを付けるカスタマイズをしてみよう！

どもぉ～！最近CSSのカスタマイズにはまっている橋尾渡（@hashio_wataru）です^0^/

今回は、Simplicityの各サイドバーウィジェットに「FontAwesome」のアイコンを付けて見た目を良くする記事を書いていきたいと思います！なお、Simplicity用のIDを使っていきますので他のワードプレステーマには適用されません。注意しましょう。

では実際に、アイコンをカテゴリやアーカイブに付けてみましょう。CSSでコードを入れます。ぽちぽち…。

ご覧ください、どうでしょうか？リーフのアイコンが可愛らしいでしょう？今はアイコンを親要素にしか付けていませんが、下の子要素にもアイコンを付ける方法がありますので後から書いていきますね。

冒頭でも言ったように「fontawesome」という特殊なフォントを利用しています。FontAwesomeには様々なアイコンが用意されていて、ジャンル毎に分かれているので各所に適したアイコンを選べます。

アイコンを何も付けていないとちょっと寂しいですからね。こういったカスタマイズをすることによってあなたのサイトがより賑やかになりますし、どんなアイコンを使うのかという個人の性格がでるので面白いですよね。

それでは、各ウィジェットにアイコンを付けていく作業に取り掛かりましょう！

最近の投稿にアイコンをつける

まずはウィジェットにアイコンを付けいない状態をご覧ください。

これでは記事の区切りがどこにあるのか、パッと見わかりませんね。しかし、FontAwesomeでアイコンを付けると…。

どうでしょうか、区切りがハッキリとして各記事のタイトルが読みやすくなりました。こうすればブログの訪問者もスラスラと文字を読むことができ、新着記事がどれだけあっても目が疲れることがありませんね。

どれだけアイコンが重要なのか教えてくれる画像です（笑）それでは以下に、「最新の投稿」のCSSコードを貼り付けておきます。あとでアイコンや色をを変えてみましょう。

#recent-posts-2 > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

アーカイブにアイコンをつける

アーカイブにFontAwesomeでアイコンを付けると、月毎のリンクが少しずれてしまいます。これだとバランスが悪く見た目がちょっと良くないですよね。こういう場合には「padding-left」というプロパティを使用すればずらすことができるので安心してください。

#archives-3 > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

.month li {
    padding-left: 1em;

このCSSコードを入れるとこうなります。

どうですか、バランスが良くなったでしょう？しかし、これは年の部分にしかアイコンを付けない場合のCSSコードです。もし、月毎にもアイコンを付けたいという場合は以下のコードをコピーしてください。

#archives-3 > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

#archives-3 ul > li > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

このコードをコピーして貼り付ければ、月毎にもアイコンが表示され良い感じになります♪

カテゴリーにアイコンをつける

これもアーカイブと同じ原理ですね。親要素のみにアイコンを付けたい場合はこのコードをコピーしてください。

#categories-2 > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 6px;
  color: #76AE68;
}

そして、子要素にもFontAwesomeのアイコンを付けたい場合はこちらのコードをコピーしましょう。

#categories-2 > ul > li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 6px;
  color: #76AE68;
}

#categories-2 ul > li > ul li:before {
  content: "\f06c";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

FontAwesomeでアイコンを選ぶ方法

コードをコピーしてアイコンを表示させることはできましたね。続きまして、FontAwesomeのホームページに移動して好きなアイコンを選んでみましょう。アイコンを選べるページを指定していますのであとは見つけるだけです。

リンクに移動してもらうと、アイコンをズラーっと表示されるページが開きましたね。「Search icons」で文字を入力すれば希望のアイコンがでてきます。例えば「right」とかで検索すると、矢印の右方向がでてきます。

そして、その下には大量のアイコンがあります。ここであなたの好きなアイコンを見つけてください。では適当に「anchor」という碇のマークを選んでみます。

「anchor」のページがでてきました。「Unicode」という文字の右に表示されている「f13d」というコードがCSSに記入するコードです。これを先程のコピーしたコードと書き換えてみましょう。

#recent-posts-2 > ul > li:before {
  content: "\f13d";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
}

書き換える部分は「content: “\f13d”;」という場所の「””」で挟まれた部分です。これを書きかえることによって以下のように変わります。

あとは、好きなアイコンを見つけたらコードを書き換えるだけです。簡単ですね(^0^)/

その他

アイコンの表示とFontAwesomeの使い方がわかったら、次にすることは文字の大きさやフォントの色を変えることです。緑色のままでもいいですが、あなたの好きな色を選んだほうが絶対にいいです。これも一つの味となります。

文字の大きさを変える

では最初に文字の大きさを変えてみましょう。デフォルトの大きさのままでもいいですが、アイコンが大きいとより目立つので色んな記事を読んでもらえる可能性がでてきます。是非、文字の大きさを変えてみましょう！

見てください、先程の小さなアイコンとは打って変わってタイトルの文字より大きなアイコンになりましたね。このようにアイコンを大きさを変えたい場合は「font-size」のプロパティを入れてやれば大きさを変えることができます。

#recent-posts-2 > ul > li:before {
  content: "\f13d";
  font-family: fontawesome;
  margin-right: 10px;
  color: #76AE68;
  font-size: 150%;
}

文字の大きさは150％にしてみました。デフォルトは100％で数字をあげればあげるほど文字の大きさも変わっていきます。好みの大きさに変えてあげましょう。

フォントの色を変える

今現在フォントの色は「#76AE68」に指定していますが、どんな色にでも変えることができます。例えばカラーコードを「#000000」にすれば真っ黒になりますし、「#FFFFFF」にしれやれば真っ白になります。

#recent-posts-2 > ul > li:before {
  content: "\f13d";
  font-family: fontawesome;
  margin-right: 10px;
  color: #000000;
  font-size: 150%;
}

こちらのカラーコード表をみて、色を選びましょう。きっとお気に入りの色が見つかるはずです。【カラーコード表】

まとめ

これだけアイコンを付けて、様々な装飾もしてあげればきっと魅力的なブログに様変わりします。あなただけのオリジナルサイトを構築していきましょう！

もっとCSSのことを知りたい人は本を読んで勉強してみましょう。必ず役立つ日がやってきます。

それでは、そろそろSimplicityのウィジェットにアイコンを付ける方法についての記事を終わりたいと思います。ありがとうございました！