SANGOのカスタマイズイメージ

SANGO
カスタマイズガイド

更新情報

Ver1.3.2をリリースしました（1/27）

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

SHARE

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-◯◯）

アイコンにはFontAwesomeのWebアイコンフォントが使われています（FontAwesomeの使い方）。fa-◯◯の部分を書き換えることで、好きなアイコンを使うことができます。アイコンの一覧は下のリンク先で確認できます。

FontAwesome アイコン一覧

font awesomeのアイコンコード

↑例えば、車のアイコンを使いたいときはfa-carとします。

アイコンの色（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-◯◯の部分を、さきほど同様に好きなアイコンのコードに書き換えればOKです。

【参考】タイルの背景色を変える

ウィジェットメニューのボタン部分の背景色を変えるには下記のCSSを子テーマのstyle.cssに追加してくださいませ。

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

色コードはWEB色見本で探すと良いのではないかと思います。

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

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

18 Comments

frkid

SANGOを購入させて頂きました。サイドバーウィジェットをこちらのページと同じようにタイル上に設置したいのですが、上記の記述を使ってもタイル上には並ばず、通常のリストと同じように縦に４つ並んだ状態で表示されてしまいます・・・CSSの記述などを確認してみたのですが原因がわかりません。

返信する
サルワカくん

サイトを拝見したところ、バージョン1.2をお使いのようです。記事の冒頭にも書かれていますが、対応しているのはVer1.3〜です。アップデートをよろしくお願いします。

返信する
frkid

こんな初歩的なことにまで丁寧にお答え頂きありがとうございます。
今後も利用を続けさせて頂きます。

返信する
転職キャンパス

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

返信する
サルワカくん

お世話になっております。
liタグとaタグの間に改行が貼っていしまっていることが原因のようです。
スペースを消してみて下さいませ。

返信する
あくろぽら

アップデートと丁寧なご対応、誠にありがとうございます。
教えて欲しいことがあります。Fontawesomeが更新されたようですが、scriptを挟む場所をアドバイスいただけないでしょうか。

SANGOに変えてから、ブログの更新が楽しくてしかたありません。ありがとうございます。

返信する
サルワカくん

Scriptとは、JavaScriptファイルの読み込む方法を知りたいということでしょうか。
それともFontAwesome5のCDNコードの読み込み方が分かれば良いでしょうか。

返信する
あくろぽら

解りずらい表現ですみません。FontAwesome5のCDNコードの読み込み方です。よろしくお願いします。

返信する
サルワカくん

以下のコードを子テーマなどのfunctions.phpに追記すれば、FontAwesome5が使われるようになります。
※CDNのURLの部分をコピペで変えてくださいませ。

//FontAwesome5に変更
function register_fontawesome5() {
     wp_deregister_style('sng-fontawesome');//旧FontAwesomeを解除
     wp_register_style( 'sng-fontawesome5', 'FontAwesome5のCDNのURL', array(), '', 'all' );
     wp_enqueue_script('sng-fontawesome5');
}
add_action('wp_enqueue_scripts', 'register_fontawesome5');
//END FontAwesome5に変更

ただし、一部アイコン名が変わっているかもしれないので、その場合にはアイコン名を変更して頂く必要があります。
（参考：変更の必要があるアイコン一覧：Upgrading from Version 4）。

返信する
あくろぽら

早速のご教示、誠に感謝申し上げます。
まず試して見たいと思います。
ありがとうございました！

カズ

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

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

返信する
サルワカくん

お世話になっております。下記のCSSを追加すれば、トップページ用固定ページでも使えるようになると思います。

#main .widget-menu {
  margin: 0 0 1em;
  padding: 0;
  border-top: 0;
  list-style: none;
}
#main .widget-menu li {
  margin-top: 1px;
  padding: 0;
}
#main .widget-menu li:after {
  display: table;
  content: "";
}
#main .widget-menu a {
  display: block;
  padding: 1.2em .5em;
  font-weight: bold;
  text-decoration: none;
  color: #555;
}
#main .widget-menu a:hover {
  background: #EFEFEF;
}
返信する
カズ

お忙しい中、早々とご対応いただき感謝いたします。
無事、綺麗に表示されました！本当にありがとうございます！

返信する
小野

お世話になります。SANGOテンプレートを日々利用させて頂いております。
SANGOの「外観＞ウィジェット＞サイドバー」についてですが、そもそもページ内の左側に表記するよう変更する（左カラムへする）ことは可能でしょうか？
お忙しいかとは思いますが、ご指導のほど宜しくお願い致します。

返信する
サルワカくん

大変申し訳ないのですが、左にサイドバーを設置することは想定しておりません・・・。ご理解頂けると幸いです。

返信する
でるた

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

返信する
サルワカくん

コメント欄のON/OFFはWordPressの共通仕様なので「WordPress　コメント　非表示」などとGoogleで検索すると、以下のような分かりやすい解説記事がたくさんヒットします。
WordPress コメント欄の非表示設定
すでに公開済みの投稿も含めて一括でコメント欄をオフにするためには、「Disable Comments」などのプラグインなどを利用するのが良いかと思います。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

モバイル用フッター固定メニューの設定方法

次の記事

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ