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

2019-03-172019-05-19WordPress・カスタマイズアイコンフォント

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

　文字だけの例

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

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

横２列のデザイン

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>