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