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行となりますね！
メニュー名のテキストを変更するとデザインが崩れる
初めまして、こんにちは。ワードプレス初心者です。 トップページ上にウィジェット用のメニューを追加しようとしまして カスタムHTMLにて上記のHTMLコードをコピペしましたが以下の状態になります。 サイトの方をみていただけると早いかと思います。 １、メニュー4が正常に表示されない ２、メニューテキストを変更すると、メニューブロックが崩れる といった状態になってしまいます。 お手数かけますが、対応方法…
ウィジェットのカテゴリーの表示順を変えたい
いつも大変お世話になっております。 改めまして、素晴らしいテーマをありがとうございます。 さて、ウィジェットに表示させるカテゴリーに関して、お教えいただきたいことがございます。 ウィジェットに表示させるカテゴリーの順序ですが、現在の仕様ではカテゴリーIDによって（？）自動的に決まるようです。表示させる順番を変えたいのですが、下記のプラグインを試したところプラグインを「有効」にしていないと変更した順…
サイドバーのプロフィール写真のサイズを変更できない（大きくできない）
ワードプレスの初心者です。 他のサイトなどを見て、画像サイズやCSSの追記などを試しましたが、変更できません。 お忙しいところ恐縮ですが、アドバイス願います。
メニューボックスのアイコン位置が左になるのを中央にしたい
はじめまして、いつもサイトを参考にさせていただいています。 この度、テーマをストークからSANGOに変更しました。 憧れのメニューボックスを使いたいのですが、HTMLをコピペしたところ、アイコンだけ左にずれてしまいます。 お忙しいところ大変お手数ですが、もし理由がわかればご教示いただけますと嬉しいです。 よろしくお願いいたします。
ウィジェットメニューのデザインが崩れる
初めまして。今回1つ聞きたいことがあり連絡しました。 当サイトに飛んでもらえれば一目瞭然なんですが、「カスタムHTML」を用いて作るメニュー欄が大きくなってしまいます。 色々対策はやったのですが、一向に改善しません。 テーマ購入はSANGOが初めてなので、テーマ変更による弊害とかは特にありません。 お手数おかけしますが、アドバイス等頂ければ幸いです。
カテゴリや記事毎にナビゲーションメニューを変えたい
はじめまして。お世話になります。 自分のブログはゲームを全般的に扱っているのですが、全般的に扱っている関係上ナビゲーションメニュー（スライドメニュー）に特化性がありません。 ・ホーム ゲームタイトルA ゲームタイトルB ゲームタイトルC みたいな感じです。これをカテゴリや記事毎に変更して特化したメニューが表示できるようになればユーザーにより分かりやすいブログになると思っているのです。特にケータイか…
アイコンを変えたのにトップページから開くと変わらない
こんにちは。 SANGOとても使いやすく、重宝させていただいております。 スマホナビドロワーにメニューを追加し、メニュー内のアイコンを変更しましたが、トップページで開いた時に元のアイコンが表示されます。 一度クリックして別ページから開くと、きちんと変更したアイコンが表示されます。 どうしたらトップページでも変更したアイコンを表示できますでしょうか？ お忙しい中恐縮ですが、ご回答お願い致します。
メニューボックスのタイトル文字の色を変えたい
お忙しいところすいません。 メニュの文字の色を変えたいのですがどうすればよろしいでしょうか？ ご教授お願いします！ Useの色を「白」から周りのウィジェットの色と合わせたいです。
メニューボックスのタイトルを左寄せにしたい
お忙しいところすみません。 いつもSANGOでお世話になっています。 メニューボックスのタイトル(例メニュー)が中央寄せになっていますが、これを左寄せにすることは可能でしょうか？
いつもこちらのサイト、そしてSANGOにはお世話になっています。 みなさまのコメント等で検索しましたが、見つけられず、質問させていただきます （既出でしたらすみません） サイドバーでメニューのタイトル部分を上部両端を角丸に設定しました。（タイトル部分の背景は青系色です） 角丸の削れた？部分が白で表示されますが、全体の背景色は初期設定の＃RRGGBBです。 角丸の白くなった部分を背景と同じ＃RRGG…
メニューボックスが段ズレする
いつもお世話になっております。 ウィジェットに下記の画像リンクをはりつけたところ ３番目に入るli 項目からfloat 落ちをしてしました。 .widget-menu li:nth-child(even) { border-left: solid 2px #EFEFEF; } を外せば、float落ちせずにいくのですが、このボーダーを保ったままメニューを使いたいと思うのですが、良い方法はないでしょ…
ウィジェットタイトルとウィジェットメニューの背景色を変えたい
いつもお世話になっております。 サイト見てもらえればわかりやすいと思うのですが、ウィジェットタイトルとウィジェットメニューのまわりの白地を背景と同じ色にしたい場合どうすればいいでしょうか？
メニューボックスウェジェットのメニュー背景色を変えたい
こんにちは。 メニューボックスウェジェットのメニュー背景色を「ウィジェットタイトルの背景色」と同じにしたいのですが、可能でしょうか？
コメント欄を非表示にしたい
どこに書いていいかが分からないので、ここに質問させていただきました。 投稿ページの下部にある「コメントを残す」の部分は消すことはできますでしょうか？
トップページ用固定ページでメニューボックスを使うとデザインが崩れる
お世話になっております。 投稿ページや固定ページでメニューを設置しようとしたのですが、固定ページのテンプレートを「トップページ用」に切り替えると表示が崩れてしまいました。 トップページ用の横幅の関係で表示が崩れるのだと思うのですが、どのようにすれば綺麗に表示されるようになるでしょうか？ お手数をおかけしますがよろしくお願いします。
初めまして。こんにちわ。いつもサイトを拝見させて頂いております！昨日SANGOを購入させて頂き、カスタマイズしているのですが、各メニューBOXの上に若干空白部分が出来てしまいます。何かアドバイス頂けましたら幸いです。