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

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


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


目次
横2列のデザイン
CSS追記
子テーマの「style.css」に以下のコードを追記します。
/*横2列メニュー*/
.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">メニュー1</a></li>
<li><a href="URL">メニュー2</a></li>
<li><a href="URL">メニュー3</a></li>
<li><a href="URL">メニュー4</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>メニュー1</a></li>
<li><a href="URL"><i class="fab fa-instagram" style="color: #e1306c"></i>メニュー2</a></li>
<li><a href="URL"><i class="fab fa-twitter" style="color: #55acee"></i>メニュー3</a></li>
<li><a href="URL"><i class="fab fa-facebook-f" style="color: #315096"></i>メニュー4</a></li>
</ul>


アイコンのカラーはHTMLで指定します。アイコンごとにカラーを変える事も可能です。
例:ツイッターの場合
<i class="fab fa-twitter" style="color: #55acee"></i>
アイコンフォント・カラーサンプル
アイコンフォントの使い方は以下をご覧ください。
SNSなどのアイコンコードは以下でも紹介しています。
メールなどは以下です。
カラー変更には以下もご利用下さい。
横3列にしたい時


2列の際、50%で指定した幅を、33.3%に変えるだけで可能ですのでコードは省略します。
参考:タブレットの見え方


参考:スマホの見え方


以上です!
関連記事
タグ
関連記事


ルクセリタス機能の目次デザインをカスタマイズ3パターン
無料テーマ「ルクセリタス」には目次自動生成機能があります。 プラグインを使った目 ...


SNSなどのカラーコードとアイコンフォントまとめ
Twitter・Facebook・LINE・Instagram・Y ...


アフィリエイトリンクで役立つ!ネットショップ等のカラーコード17種
アフィリエイトで役立つブログツールの定番 カエレバ、トマレバ、ヨメレバでリンクを ...


アイコンフォントFont Awesome 6の使い方・向きやサイズ、動き設定
Font Awesome Ver.6 について 2020年6月 Font Awe ...


グローバルメニューにプラグインなしでアイコンフォントを表示する
ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。 通常の「 ...
ディスカッション
コメント一覧
まだ、コメントがありません