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アイコンフォントが使われています
バージョンや設定により使用可能なFontAwesomeのアイコンが異なるのでご注意ください。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。
詳しくは以下の記事をご覧ください。
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〜は、サイトバーだけでなく投稿や固定ページでもこちらのメニューが使えるようになりました。以下は表示サンプルです。
コードはサイドバーに貼るものと同じです。さきほど紹介したコードを、投稿エディタの「テキスト」の方の好きな位置に貼り付けてくださいませ。ビジュアルエディタの方ではないのでご注意を。
各ボタン内のテキストが改行されると、デザインが崩れてしまいます。短めのテキストを設定するようお願いします。
タブレット以上のサイズの画面では3列にする方法
タブレットやパソコンで見たときに、横2列だと少しスカスカに見えてしまうことが気になる方もいるかもしれません。そこで、以下のように「スマホでは横2列、タブレット以上では横3列で表示させる」というCSSも仕込んでおきました。
上のように表示したい場合には、コードの<ul class="widget-menu dfont cf">のclassの中にmenu-threeを追加します。具体的には、以下のように変更します。
<ul class="widget-menu menu-three dfont cf">これでタブレット以上のサイズの画面で見たときには3列で表示されます。注意したいのが、スマホでは2列で表示されるため、6個のメニューを作らないと表示が崩れてしまうことです。そうすれば、スマホでは2列×3行、タブレット以上では3列×2行となりますね！
お忙しいところすいません。
回答を見るメニュの文字の色を変えたいのですがどうすればよろしいでしょうか？
ご教授お願いします！
Useの色を「白」から周りのウィジェットの色と合わせたいです。
お忙しいところすみません。
回答を見るいつもSANGOでお世話になっています。
メニューボックスのタイトル(例メニュー)が中央寄せになっていますが、これを左寄せにすることは可能でしょうか？
いつもこちらのサイト、そしてSANGOにはお世話になっています。
みなさまのコメント等で検索しましたが、見つけられず、質問させていただきます
（既出でしたらすみません）
サイドバーでメニューのタイトル部分を上部両端を角丸に設定しました。（タイトル部分の背景は青系色です）
回答を見る角丸の削れた？部分が白で表示されますが、全体の背景色は初期設定の＃RRGGBBです。
角丸の白くなった部分を背景と同じ＃RRGGBBに設定したいです。
方法について、ご教授いただければ幸いです。
いつもお世話になっております。
ウィジェットに下記の画像リンクをはりつけたところ
３番目に入るli 項目からfloat 落ちをしてしました。
.widget-menu li:nth-child(even) {
border-left: solid 2px #EFEFEF;
}
を外せば、float落ちせずにいくのですが、このボーダーを保ったままメニューを使いたいと思うのですが、良い方法はないでしょうか。
カイロメニュー
回答を見る
いつもお世話になっております。
回答を見るサイト見てもらえればわかりやすいと思うのですが、ウィジェットタイトルとウィジェットメニューのまわりの白地を背景と同じ色にしたい場合どうすればいいでしょうか？
こんにちは。
回答を見るメニューボックスウェジェットのメニュー背景色を「ウィジェットタイトルの背景色」と同じにしたいのですが、可能でしょうか？
どこに書いていいかが分からないので、ここに質問させていただきました。
回答を見る投稿ページの下部にある「コメントを残す」の部分は消すことはできますでしょうか？
お世話になっております。
投稿ページや固定ページでメニューを設置しようとしたのですが、固定ページのテンプレートを「トップページ用」に切り替えると表示が崩れてしまいました。
トップページ用の横幅の関係で表示が崩れるのだと思うのですが、どのようにすれば綺麗に表示されるようになるでしょうか？
回答を見るお手数をおかけしますがよろしくお願いします。
初めまして。こんにちわ。いつもサイトを拝見させて頂いております！昨日SANGOを購入させて頂き、カスタマイズしているのですが、各メニューBOXの上に若干空白部分が出来てしまいます。何かアドバイス頂けましたら幸いです。
回答を見る