1.8.6 Released !

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

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

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

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

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

カスタムHTMLを追加

次にカスタム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アイコンフォントが使われています

参考:SANGOFontAwesome対応

バージョンや設定により使用可能なFontAwesomeのアイコンが異なるのでご注意ください。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。

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

SANGOでFontAwesome4.7から5へと切り替える方法と注意点

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

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

アイコンの色(color:◯◯)

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

カラーコード一覧

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

メニュー名

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

MEMO
メニューの項目数を増やしたいときには、<li>〜</li>を好きな数だけコピペして複製すればOKです。偶数個にするのがおすすめです。

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

メニュータイトルを変える方法

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

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

HTML
<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に書き換えると、アクセントカラーが背景色に使われるようになります。

アイコンを変える

HTML
<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に追加してくださいませ。

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

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

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

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

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

SANGOカスタマイズメニュー

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

注意

各ボタン内のテキストが改行されると、デザインが崩れてしまいます。短めのテキストを設定するようお願いします。

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

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

SANGOカスタマイズメニュー

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

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

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

44 COMMENTS

あり 2019/10/27

はじめまして、いつもサイトを参考にさせていただいています。
この度、テーマをストークからSANGOに変更しました。
憧れのメニューボックスを使いたいのですが、HTMLをコピペしたところ、アイコンだけ左にずれてしまいます。
お忙しいところ大変お手数ですが、もし理由がわかればご教示いただけますと嬉しいです。
よろしくお願いいたします。

回答を見る
ノロノロ 2019/07/18

初めまして。今回1つ聞きたいことがあり連絡しました。
当サイトに飛んでもらえれば一目瞭然なんですが、「カスタムHTML」を用いて作るメニュー欄が大きくなってしまいます。
色々対策はやったのですが、一向に改善しません。
テーマ購入はSANGOが初めてなので、テーマ変更による弊害とかは特にありません。
お手数おかけしますが、アドバイス等頂ければ幸いです。

回答を見る
ぼるぼっくす。 2019/06/26

はじめまして。お世話になります。

自分のブログはゲームを全般的に扱っているのですが、全般的に扱っている関係上ナビゲーションメニュー(スライドメニュー)に特化性がありません。

・ホーム ゲームタイトルA ゲームタイトルB ゲームタイトルC

みたいな感じです。これをカテゴリや記事毎に変更して特化したメニューが表示できるようになればユーザーにより分かりやすいブログになると思っているのです。特にケータイから見てくださっている方にとって。

例えばゲームタイトルAの記事やカテゴリを読んでいるときはメニューが

・ホーム レベル上げ 金策 ジョブTips ダンジョン攻略

みたいに変わる感じです。ブログ主からも読み手からもとても便利かなと思っています。

なんとか実現できないかなと思って『Zen Menu Logic』というプラグインを入れてみたのですが

・一応記事毎に切り替えることはできる
・でもなぜかトップページのメニューも切り替わってしまう
・PCかモバイルのどちらかにしか適応できない

と期待する動きはしてくれませんでした。

事前に表示させるメニューをあらかじめゲームごとに追加しておいて、カテゴリページや記事編集画面から表示させるメニューを選択できる…と、とても理想的だなと思っています。

とても難しいカスタマイズだと思いますが、お力を貸していただけると幸いです。よろしくお願いします。

回答を見る
まるお 2019/05/26

こんにちは。
SANGOとても使いやすく、重宝させていただいております。
スマホナビドロワーにメニューを追加し、メニュー内のアイコンを変更しましたが、トップページで開いた時に元のアイコンが表示されます。
一度クリックして別ページから開くと、きちんと変更したアイコンが表示されます。

どうしたらトップページでも変更したアイコンを表示できますでしょうか?

お忙しい中恐縮ですが、ご回答お願い致します。

回答を見る
どろろ 2019/01/31

お忙しいところすいません。
メニュの文字の色を変えたいのですがどうすればよろしいでしょうか?
ご教授お願いします!
Useの色を「白」から周りのウィジェットの色と合わせたいです。

回答を見る
nana_papa 2018/12/22

お忙しいところすみません。
いつもSANGOでお世話になっています。
メニューボックスのタイトル(例メニュー)が中央寄せになっていますが、これを左寄せにすることは可能でしょうか?

回答を見る
五月 2018/06/26

いつもこちらのサイト、そしてSANGOにはお世話になっています。
みなさまのコメント等で検索しましたが、見つけられず、質問させていただきます
(既出でしたらすみません)

サイドバーでメニューのタイトル部分を上部両端を角丸に設定しました。(タイトル部分の背景は青系色です)
角丸の削れた?部分が白で表示されますが、全体の背景色は初期設定の#RRGGBBです。
角丸の白くなった部分を背景と同じ#RRGGBBに設定したいです。
方法について、ご教授いただければ幸いです。

回答を見る
sora117 2018/06/18

いつもお世話になっております。

ウィジェットに下記の画像リンクをはりつけたところ
3番目に入るli 項目からfloat 落ちをしてしました。

.widget-menu li:nth-child(even) {
border-left: solid 2px #EFEFEF;
}
を外せば、float落ちせずにいくのですが、このボーダーを保ったままメニューを使いたいと思うのですが、良い方法はないでしょうか。

カイロメニュー

回答を見る
まさと 2018/06/12

いつもお世話になっております。
サイト見てもらえればわかりやすいと思うのですが、ウィジェットタイトルとウィジェットメニューのまわりの白地を背景と同じ色にしたい場合どうすればいいでしょうか?

回答を見る
FMOGA 2018/05/05

こんにちは。
メニューボックスウェジェットのメニュー背景色を「ウィジェットタイトルの背景色」と同じにしたいのですが、可能でしょうか?

回答を見る
でるた 2018/03/14

どこに書いていいかが分からないので、ここに質問させていただきました。
投稿ページの下部にある「コメントを残す」の部分は消すことはできますでしょうか?

回答を見る
カズ 2018/02/05

お世話になっております。
投稿ページや固定ページでメニューを設置しようとしたのですが、固定ページのテンプレートを「トップページ用」に切り替えると表示が崩れてしまいました。

トップページ用の横幅の関係で表示が崩れるのだと思うのですが、どのようにすれば綺麗に表示されるようになるでしょうか?
お手数をおかけしますがよろしくお願いします。

回答を見る
転職キャンパス 2018/02/01

初めまして。こんにちわ。いつもサイトを拝見させて頂いております!昨日SANGOを購入させて頂き、カスタマイズしているのですが、各メニューBOXの上に若干空白部分が出来てしまいます。何かアドバイス頂けましたら幸いです。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン