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

2019-03-172019-05-19アイコンフォント

 

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

 

横２列のデザイン

 

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>

アイコンのカラーはHTMLで指定します。アイコンごとにカラーを変える事も可能です。

例：ツイッターの場合

 

アイコンフォント・カラーサンプル

アイコンフォントの使い方は以下をご覧ください。

SNSなどのアイコンコードは以下でも紹介しています。

メールなどは以下です。

 

カラー変更には以下もご利用下さい。

セーフ色名赤桃青紫黄橙緑茶黒

 

 

横３列にしたい時

２列の際、50%で指定した幅を、33.3％に変えるだけで可能ですのでコードは省略します。

 

 

以上です！