横並びテーブルのようなメニューを作る-アイコンフォントでスマートに

WordPress・カスタマイズ

2019.03.17

この記事は約6分で読めます。

今回は、サイドバーに表示するメニューボックスを作ってみます。

　文字だけの例

アイコンフォントなし

　アイコンフォントを使った例

アイコンフォントあり

横２列のデザイン
- CSS追記
- ウィジェット追加
  - 文字のみのタイプ
  - アイコンフォントを使ったタイプ
アイコンフォント・カラーサンプル
横３列にしたい時

横２列のデザイン

CSS追記

子テーマの「style.css」に以下のコードを追記します。

/*横２列メニュー*/
.col2_menu_title {
padding: 10px;
font-size: 18px;
background: #ebebeb; /*タイトル背景色*/
}
.col2_menu_title a {
color: #9d9d9d; /*タイトル文字色*/
text-decoration: none;
}
.col2_menu_title a:hover {
color: #fb8a8a; /*タイトルホバー色*/
}
.col2_menu {
text-align: center;
}
.col2_menu li {
list-style:none;
float: left;
width: 50%;
border-bottom: solid 2px #efefef; /*下線・色*/
font-size: 12px;
vertical-align: middle;
background: #fff; /*背景色*/
}
.col2_menu i {
display: block;
font-size: 36px;
}
.col2_menu li a {
display: block;
padding: 7px;
color: #9d9d9d; /*テキスト色*/
text-decoration: none;
}
.col2_menu li a:hover {
background: #ebebeb; /*ホバー時の背景色*/
}

/* クリアフィックス */
.clearfix:after{ /*floatの解消*/
clear: both;
}

※色やラインなどはお好みで編集して下さい。

ウィジェット追加

文字のみのタイプ

アイコンフォントなし

表示したいエリアに「カスタムHTML」を追加し、以下のコードを貼り付けます。

クラス名は、上記CSSで追加した任意の名称

<div class="col2_menu_title">
<a href="URL">メニュータイトル</a></div>
<ul class="col2_menu clearfix">
<li><a href="URL">メニュー１</a></li>
<li><a href="URL">メニュー２</a></li>
<li><a href="URL">メニュー３</a></li>
<li><a href="URL">メニュー４</a></li>
</ul>

アイコンフォントを使ったタイプ

アイコンフォントあり

表示したいエリアに「カスタムHTML」を追加し、以下のコードを貼り付けます。

クラス名は、上記CSSで追加した任意の名称

<div class="col2_menu_title">
<a href="URL"><i class="fas fa-angle-double-right" style="color: #9d9d9d"></i>メニュータイトル</a></div>
<ul class="col2_menu clearfix">
<li><a href="URL"><i class="fas fa-envelope" style="color: #9d9d9d"></i>メニュー１</a></li>
<li><a href="URL"><i class="fab fa-instagram" style="color: #e1306c"></i>メニュー２</a></li>
<li><a href="URL"><i class="fab fa-twitter" style="color: #55acee"></i>メニュー３</a></li>
<li><a href="URL"><i class="fab fa-facebook-f" style="color: #315096"></i>メニュー４</a></li>
</ul>