【コピペでOK】FontAwesome4.7を使ってアイコンパネルをCSSカスタマイズで作る方法

2020年5月4日2025年7月5日

「どうも標準でのカテゴリ表示ってダサいよな…」って感じている人、多いと思います。

シンプル・イズ・ベストで良いんだけど、やはり見に来た人は見にくい形。
人はイメージを持たせてあげたり、発見したりしやすくなると次の場所として選択していきます。

もっと良いカテゴリー表示ないのか？となるのが「アイコンパネル」です！

なんだかカッコいい、そしてカワイイ！

そしてなんだか見やすくて押しやすい！

今まではカテゴリーで文字だけだったんですが、このアイコンパネルを使うと非常に分かりやすくて押しやすいなと感じます。

今回はこのアイコンパネルをCSSでコピペでポンとできるように作成していきます！

今回はWordPressテーマ『DIVER』を使用しています。DIVERはFontAwesome4.7が標準で実装されています。同じようにテーマにFontAwesome4.7が実装されていれば今回のカスタマイズを使用できます。

CSSカスタマイズでアイコンパネルを作る手順

アイコンパネルを作成する方法はCSSでデザインを作り、テキストで呼び出すという方法を使います。

コピペでポンっとできるようにしてますが、解説を加えながら誰でもできるようにしていくので、ぜひやってみましょう。

CSSのコードをコピペする

そして、以下のコードをstyle.cssにコピペしましょう！

/*=================================================================================
アイコンメニュー ここから
=================================================================================*/
.widget_btn{
margin:-10px;
background:#eee;
display: flex;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.widget_btn a{
text-align:center;
width:50%;
padding:8px 0 12px;
background:#fff;
border:1px solid #eee;
font-weight:bold;
}
.widget_btn a i {
display:block;
font-size:24px;
padding:10px 0 6px;
}
.widget_btn a span {
font-size:12px;
}
/** アイコンの色 **/
.widget_btn a:nth-child(1) i {
color:#000;
}
.widget_btn a:nth-child(2) i {
color:#000;
}
.widget_btn a:nth-child(3) i {
color:#000;
}
.widget_btn a:nth-child(4) i {
color:#000;
}
/*=================================================================================
アイコンメニュー ここまで
=================================================================================*/

CSSを呼び出してアイコンパネルを作る

次にさきほどデザインしたアイコンパネルを呼び出してみましょう！

まずはカスタムHTMLウィジェットをサイドバーに設置しましょう。

1.カスタムHTMLウィジェットをサイドバーに設置

ダッシュボード→外観→ウィジェットを開く

2.カスタムHTMLをサイドバーに設置します。

下記のコードをカスタムHTML内にコピペします。

<div class="widget_btn">
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/wordpress/"><i class="fa fa-wordpress" style="color: #696969;"></i>ここに文字を入力</a>
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/know-how/"><i class="fa fa-edit" style="color: #f08080;"></i>ここに文字を入力</a>
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/seo/"><i class="fa fa-line-chart" style="color: #ffb776;"></i>ここに文字を入力</a>
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/customize/"><i class="fa fa-wrench" style="color: #77d477;"></i>ここに文字を入力</a>
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/theme/"><i class="fa fa-cog" style="color: #4169e1;"></i>ここに文字を入力</a>
<a href="https://greencoatle.soratobunezumi.co.jp/seo/category/plugin/"><i class="fa fa-cogs" style="color: #4169e1;"></i>ここに文字を入力</a>
</div>

するとこんな感じのアイコンパネルが作れるハズです。

そして、この２つは最低でも変更しましょう。

①https://の部分はURLなので、ボタンを押した時の移動先に。
②「ここに文字を入力」というところは自分なりの単語に。

ちなみにこのアイコンパネルはサイドバーだけじゃなくて、テキストを打てればどこでも作成できます。