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-◯◯）
アイコンにはFontAwesomeのWebアイコンフォントが使われています（FontAwesomeの使い方）。fa-◯◯の部分を書き換えることで、好きなアイコンを使うことができます。アイコンの一覧は下のリンク先で確認できます。
↑例えば、車のアイコンを使いたいときはfa-carとします。
アイコンの色（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-◯◯の部分を、さきほど同様に好きなアイコンのコードに書き換えればOKです。
【参考】タイルの背景色を変える
ウィジェットメニューのボタン部分の背景色を変えるには下記のCSSを子テーマのstyle.cssに追加してくださいませ。
.widget-menu li {
background-color: #色コード;
}色コードはWEB色見本で探すと良いのではないかと思います。
投稿ページや固定ページでメニューを設置する方法
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行となりますね！
SANGOを購入させて頂きました。サイドバーウィジェットをこちらのページと同じようにタイル上に設置したいのですが、上記の記述を使ってもタイル上には並ばず、通常のリストと同じように縦に４つ並んだ状態で表示されてしまいます・・・CSSの記述などを確認してみたのですが原因がわかりません。
サイトを拝見したところ、バージョン1.2をお使いのようです。記事の冒頭にも書かれていますが、対応しているのはVer1.3〜です。アップデートをよろしくお願いします。
こんな初歩的なことにまで丁寧にお答え頂きありがとうございます。
今後も利用を続けさせて頂きます。
初めまして。こんにちわ。いつもサイトを拝見させて頂いております！昨日SANGOを購入させて頂き、カスタマイズしているのですが、各メニューBOXの上に若干空白部分が出来てしまいます。何かアドバイス頂けましたら幸いです。
お世話になっております。
liタグとaタグの間に改行が貼っていしまっていることが原因のようです。
スペースを消してみて下さいませ。
ご丁寧に有難うございます！お陰で解決致しました！
アップデートと丁寧なご対応、誠にありがとうございます。
教えて欲しいことがあります。Fontawesomeが更新されたようですが、scriptを挟む場所をアドバイスいただけないでしょうか。
SANGOに変えてから、ブログの更新が楽しくてしかたありません。ありがとうございます。
Scriptとは、JavaScriptファイルの読み込む方法を知りたいということでしょうか。
それともFontAwesome5のCDNコードの読み込み方が分かれば良いでしょうか。
解りずらい表現ですみません。FontAwesome5のCDNコードの読み込み方です。よろしくお願いします。
以下のコードを子テーマなどのfunctions.phpに追記すれば、FontAwesome5が使われるようになります。
※CDNのURLの部分をコピペで変えてくださいませ。
ただし、一部アイコン名が変わっているかもしれないので、その場合にはアイコン名を変更して頂く必要があります。
（参考：変更の必要があるアイコン一覧：Upgrading from Version 4）。
早速のご教示、誠に感謝申し上げます。
まず試して見たいと思います。
ありがとうございました！
お世話になっております。
投稿ページや固定ページでメニューを設置しようとしたのですが、固定ページのテンプレートを「トップページ用」に切り替えると表示が崩れてしまいました。
トップページ用の横幅の関係で表示が崩れるのだと思うのですが、どのようにすれば綺麗に表示されるようになるでしょうか？
お手数をおかけしますがよろしくお願いします。
お世話になっております。下記のCSSを追加すれば、トップページ用固定ページでも使えるようになると思います。
お忙しい中、早々とご対応いただき感謝いたします。
無事、綺麗に表示されました！本当にありがとうございます！
お世話になります。SANGOテンプレートを日々利用させて頂いております。
SANGOの「外観＞ウィジェット＞サイドバー」についてですが、そもそもページ内の左側に表記するよう変更する（左カラムへする）ことは可能でしょうか？
お忙しいかとは思いますが、ご指導のほど宜しくお願い致します。
大変申し訳ないのですが、左にサイドバーを設置することは想定しておりません・・・。ご理解頂けると幸いです。
どこに書いていいかが分からないので、ここに質問させていただきました。
投稿ページの下部にある「コメントを残す」の部分は消すことはできますでしょうか？
コメント欄のON/OFFはWordPressの共通仕様なので「WordPress コメント 非表示」などとGoogleで検索すると、以下のような分かりやすい解説記事がたくさんヒットします。
WordPress コメント欄の非表示設定
すでに公開済みの投稿も含めて一括でコメント欄をオフにするためには、「Disable Comments」などのプラグインなどを利用するのが良いかと思います。
こんにちは。
メニューボックスウェジェットのメニュー背景色を「ウィジェットタイトルの背景色」と同じにしたいのですが、可能でしょうか？
のCSSを追加することでメニューボックスの背景色を指定できます。
返信ありがとうございます。
コメントが不足していてすみません。
ボタン自体の背景色ではなく、ウェジェトタイトルの背景色でした。
わたしのブログのサイドバーの一番下のSNSメニューの箇所です。
よろしくお願いいたいします。
あーなるほど。メニューボックスのタイトルの背景色なら
ですね。
ありがとうございます。
無事、色の変更ができました。
が、スマホのハンバーガーメニューに関しては以前と同じ色なのですが、ここも同じ指定であっているのでしょうか？
（キャッシュ等の遅れでしたらすみません
クラス指定の.sidebarをbodyに変えたら、そちらでも反映されるかと思います。
ありがとうございます！
無事ハンバーガーメニューにも反映できました。
いつもお世話になっております。
サイト見てもらえればわかりやすいと思うのですが、ウィジェットタイトルとウィジェットメニューのまわりの白地を背景と同じ色にしたい場合どうすればいいでしょうか？
背景が茶色だと文字がかなり見えにくくなってしまいますが大丈夫ですか？
で背景色は変更可能です。
ウィジェットタイトルの背景色は外観→カスタマイズ→色で変更可能です。
問い合わせフォームの件送れましたでしょうか？
送れてないようでしたらもう一度送らせていただきます。
来ておりますが、全て回答できるわけではないのでご了承ください。
（申し訳ないのですが、本来サポートは行っておりません）
１．コンタクトフォームの”送信”というボタンの文言を変えたいのですがどうすればいいでしょうか？
２．また送信ボタンを押した後に出るメッセージが、”メッセージを送信しました”と出るのですがこちらの文言もかえられないでしょうか？
という質問だった思いますが、テーマ側にコンタクトフォーム機能はなく、そのフォームは「Contact Form7」などのプラグインで挿入してますよね？
ですのでプラグインの設定をご確認頂くしかありません。
いつもお世話になっております。
ウィジェットに下記の画像リンクをはりつけたところ
３番目に入るli 項目からfloat 落ちをしてしました。
.widget-menu li:nth-child(even) {
border-left: solid 2px #EFEFEF;
}
を外せば、float落ちせずにいくのですが、このボーダーを保ったままメニューを使いたいと思うのですが、良い方法はないでしょうか。
カイロメニュー
片方にのみ線がついていることで、左右それぞれの画像の高さが変わってしまっているようです。以下のCSSを追加することで、左側の画像にも白線がつき、floatが崩れることがなくなるのではないかと思います。
ありがとうございます！うまくfloatが入るようになりました。