メニューボックスをウィジェットやページに表示する方法

SANGOではver1.3のアップデート以降、ウィジェットに簡単に以下のようなメニューが設置できるようになりました。

横2列で縦に並んでいくメニューです。偶数個のメニュー項目を用意するのがおすすめです。主にPCのサイドバーや、モバイルの記事下などで使えるのではないかと思います。

ウィジェット用メニューの設置方法

カスタマイザー上で編集していただくことで実際に見た目を確認しながらボックスメニューを設置していただくことができます。ボックスメニューウィジェットでは以下の項目が設定できます。

メニューを表示したい位置に、カスタムHTMLをウィジェット追加します。

次にカスタムHTMLの「内容」欄に以下のコードを貼り付けます。

<div class="widget-menu__title main-bc ct strong">
	<i class="fa fa-map-marker"></i> メニュー
</div>
<ul class="widget-menu dfont cf">
	<li>
		<a href="リンク先のURL"><i class="fa fa-info" style="color: #ff9191"></i>メニュー名1</a>
	</li>
	<li>
		<a href="リンク先のURL"><i class="fa fa-rocket" style="color: #ffb776"></i>メニュー名2</a>
	</li>
	<li>
		<a href="リンク先のURL"><i class="fa fa-code" style="color: #92ceff"></i>メニュー名3</a>
	</li>
	<li>
		<a href="リンク先のURL"><i class="fa fa-pencil" style="color: #77d477"></i>メニュー名4</a>
	</li>
</ul>

↑うっすらと青や赤の下線が引かれている部分は、書き換えて頂く必要があります。

リンク先のURL

こちらはメニューをクリックしたときのリンク先のURLをそのまま貼り付ければOKです。「https://saruwakakun.com/sango/」という具合ですね。

アイコンのコード（”fa fa-◯◯”など）

アイコンにはFontAwesomeのWebアイコンフォントが使われています

詳しくは以下の記事をご覧ください。

2019年3月27日SANGOでFontAwesome4.7から5へと切り替える方法と注意点

アイコンのクラス名をコピペする

↑例えば、Twitterのアイコンを使いたいときはFontAwesomeのアイコン一覧からTwitterをクリックし、表示されるアイコンコードを見つけます。使うのは、"と"に挟まれた、<i class="この部分"></i>です。この部分をコピペして、上のコードの赤線の箇所と置き換えましょう。

アイコンの色（color:◯◯）

アイコンの色も簡単に変えることができます。まずは、以下のリンク先から使いたい色を探します。

カラーコード一覧

使いたい色があれば、#から始まるコードをまるっとコピーしましょう。これをcolor: #F89174というように書き換えます（元のカラーコードと入れ替え）。これでアイコンがその色に変わります。

メニュー名

メニュー名は、アイコンの下に表示されるテキストです。次の行へと折り返されるとデザインが崩れてしまうため、テキストは短めにしましょう（その方が読む人にも負担がかかりませんね）。

【参考】メニューのタイトル周りを変える

背景色をアクセントカラーにする

メニューの背景色には、メインカラーが使われるような設定になっています。

<div class="widget-menu__title main-bc ct strong">
	<i class="fa fa-map-marker"></i> メニュー
</div>
<ul class="widget-menu dfont cf">省略</ul>

↑ 上のmain-bcの部分をaccent-bcに書き換えると、アクセントカラーが背景色に使われるようになります。

アイコンを変える

<div class="widget-menu__title main-bc ct strong">
	<i class="fa fa-map-marker"></i> メニュー
</div>
<ul class="widget-menu dfont cf">省略</ul>

↑上の"fa fa-map-marker"の部分を、さきほど同様に好きなアイコンのコードに書き換えればOKです。

【参考】タイルの背景色を変える

ウィジェットメニューのボタン部分の背景色を変えるには下記のCSSを子テーマのstyle.cssに追加してくださいませ。

.widget-menu li {
  background-color: #色コード;
}

【参考】メニュータイトルの文字色と背景色を変える

.custom-html-widget .widget-menu__title {
 color: #文字色のコード;
 background-color: #背景色のコード;
}

投稿ページや固定ページでメニューを設置する方法

SANGOのver1.3.3〜は、サイトバーだけでなく投稿や固定ページでもこちらのメニューが使えるようになりました。以下は表示サンプルです。

• SANGOの基本設定
• 子テーマの使い方
• ショートコード一覧
• カスタマイズ応用編

コードはサイドバーに貼るものと同じです。さきほど紹介したコードを、投稿エディタの「テキスト」の方の好きな位置に貼り付けてくださいませ。ビジュアルエディタの方ではないのでご注意を。

タブレット以上のサイズの画面では3列にする方法

タブレットやパソコンで見たときに、横2列だと少しスカスカに見えてしまうことが気になる方もいるかもしれません。そこで、以下のように「スマホでは横2列、タブレット以上では横3列で表示させる」というCSSも仕込んでおきました。

• SANGOの基本設定
• 子テーマの使い方
• ショートコード一覧
• カスタマイズ応用編
• アイキャッチの作り方
• WordPress本

上のように表示したい場合には、コードの<ul class="widget-menu dfont cf">のclassの中にmenu-threeを追加します。具体的には、以下のように変更します。

<ul class="widget-menu menu-three dfont cf">

これでタブレット以上のサイズの画面で見たときには3列で表示されます。注意したいのが、スマホでは2列で表示されるため、6個のメニューを作らないと表示が崩れてしまうことです。そうすれば、スマホでは2列×3行、タブレット以上では3列×2行となりますね！