Ver1.3.1をリリースしました(11/22)

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

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色見本で探すと良いのではないかと思います。

3 Comments

frkid

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

返信する
サルワカくん

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

返信する
frkid

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

返信する

コメントを残す

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