WordPress5.5への更新について

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

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行となりますね!

58 COMMENTS

アバター
てつ 2020/10/18

iphoneでウィジェット用メニューボックスのレイアウトが崩れる

お世話になっております。ウィジェット用メニューボックス2×2がAndoroidでは問題なく表示されるのですが、iphoneでは崩れて左が3、右が1になってしまいます。(メニューボックスのサンプルコードをそのままカスタムhtmlに指定しても同じ結果になります。) (1)https://osan-kojo.com/ 同じように作っている別のサイトのスマホメニューでもウィジェット用メニューボックスを使っ…

回答を見る
アバター
みお 2020/07/14

メニューボックスをアイコンではなく画像にしたい

お世話になっております。 メニューボックスを作成していたのですが、アイコン部分に画像を入れ込む方法はありますでしょうか? この形にして、画像のサイズは680×390で入れ込んでみたのですが、なぜか3番目だけ下にズレてしまって・・・ お手数ですがよろしくお願いいたします。

回答を見る
アバター
nico 2020/04/18

メニューボックスのアイコンの色が変わらない

お世話になっております。 メニュー内のアイコンへ色を設定しても、色が適用されません。 どのようにすれば解決可能かわかるようでしたら教えて下さい。 どうぞよろしくお願いいたします。

回答を見る
アバター
YUKI 2020/04/07

スマートフォンの時だけ、メニューボックスを4列の正方形にしたい

お世話になっております。 とても素敵なテンプレートで使いやすく重宝しています。 題名の通りスマートフォンの時だけ4列の正方形で並べたいのですがどのようにCSSを記載したらよろしいでしょうか? お忙しい中恐縮ですが、教えてくださいますと幸いです。

回答を見る
アバター
gaby 2020/03/02

メニュータイトルの文字を少し大きくしたい

こんにちは。 さっそくメニューをサイドバーに導入しましたが、なぜかタイトル文字が他のサイドバーのタイトルに比べると小さいようです。これはどうしたら大きくできるのでしょうか。よろしくお願いします。

回答を見る
アバター
macy 2020/02/13

メニュー名のテキストを変更するとデザインが崩れる

初めまして、こんにちは。ワードプレス初心者です。 トップページ上にウィジェット用のメニューを追加しようとしまして カスタムHTMLにて上記のHTMLコードをコピペしましたが以下の状態になります。 サイトの方をみていただけると早いかと思います。 1、メニュー4が正常に表示されない 2、メニューテキストを変更すると、メニューブロックが崩れる といった状態になってしまいます。 お手数かけますが、対応方法…

回答を見る
アバター
STS 2020/01/08

ウィジェットのカテゴリーの表示順を変えたい

いつも大変お世話になっております。 改めまして、素晴らしいテーマをありがとうございます。 さて、ウィジェットに表示させるカテゴリーに関して、お教えいただきたいことがございます。 ウィジェットに表示させるカテゴリーの順序ですが、現在の仕様ではカテゴリーIDによって(?)自動的に決まるようです。表示させる順番を変えたいのですが、下記のプラグインを試したところプラグインを「有効」にしていないと変更した順…

回答を見る
アバター
kabe tomohiro 2020/01/07

サイドバーのプロフィール写真のサイズを変更できない(大きくできない)

ワードプレスの初心者です。 他のサイトなどを見て、画像サイズやCSSの追記などを試しましたが、変更できません。 お忙しいところ恐縮ですが、アドバイス願います。

回答を見る
アバター
あり 2019/10/27

メニューボックスのアイコン位置が左になるのを中央にしたい

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

回答を見る
アバター
ノロノロ 2019/07/18

ウィジェットメニューのデザインが崩れる

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

回答を見る
アバター
ぼるぼっくす。 2019/06/26

カテゴリや記事毎にナビゲーションメニューを変えたい

はじめまして。お世話になります。 自分のブログはゲームを全般的に扱っているのですが、全般的に扱っている関係上ナビゲーションメニュー(スライドメニュー)に特化性がありません。 ・ホーム ゲームタイトルA ゲームタイトルB ゲームタイトルC みたいな感じです。これをカテゴリや記事毎に変更して特化したメニューが表示できるようになればユーザーにより分かりやすいブログになると思っているのです。特にケータイか…

回答を見る
アバター
まるお 2019/05/26

アイコンを変えたのにトップページから開くと変わらない

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

回答を見る
アバター
どろろ 2019/01/31

メニューボックスのタイトル文字の色を変えたい

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

回答を見る
アバター
nana_papa 2018/12/22

メニューボックスのタイトルを左寄せにしたい

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

回答を見る
アバター
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

トップページ用固定ページでメニューボックスを使うとデザインが崩れる

お世話になっております。 投稿ページや固定ページでメニューを設置しようとしたのですが、固定ページのテンプレートを「トップページ用」に切り替えると表示が崩れてしまいました。 トップページ用の横幅の関係で表示が崩れるのだと思うのですが、どのようにすれば綺麗に表示されるようになるでしょうか? お手数をおかけしますがよろしくお願いします。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。