SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使うカスタマイズ

こんにちは。マリ（＠damarino_oheya）です！

このブログはワードプレス有料テーマの「SANGO」を使っています。

SANGOを使えばトップページやサイドバーにメニューボックスを簡単に設置することができます。

メニューボックスをウィジェットやページに表示する方法｜SANGOカスタマイズガイド

なんですけど、FontAwesomeのアイコンではなくオリジナルアイコンにするべく、このブログでは少しカスタマイズしています。

FontAwesomeのアイコン

自作アイコン

POINT

FontAwesomeではなくオリジナルアイコンへ
サイズは100×100推奨

マリ

透過済みのアイコンなら背景色も変えられますよ。

この記事では、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法をまとめています。

MEMO

サイドバーのメニューボックスに使えます。デザインを確認しているデバイスは、MacBook Air・iPad・iPhone6の3つのみです。

SANGOのメニューボックスをカスタマイズする方法
- HTMLはこちら
- CSSはこちら
SANGOのメニューボックスのカスタマイズまとめ

SANGOのメニューボックスをカスタマイズする方法

メニューボックスでオリジナルアイコンを使う手順としては、

画像をアップロードする
サイドバーに「カスタムHTML」を作る
↓のHTMLをコピペ＆画像URLとかを変更
↓のCSSを追加

これでオリジナルアイコンを使ったメニューボックスの完成です♩

HTMLはこちら

HTML

<ul class="widget-menu dfont cf">	<li>	<a href="カテゴリーURL①"><img src="画像URL①" alt="" > カテゴリー名</a>	</li>	<li>	<a href="カテゴリーURL②"><img src="画像URL②" alt=""> カテゴリー名</a>	</li>
<li>	<a href="カテゴリーURL③"><img src="画像URL③" alt=""> カテゴリー名</a>	</li>	<li>	<a href="カテゴリーURL④"><img src="画像URL④" alt=""> カテゴリー名</a>	</li>	<li>	<a href="カテゴリーURL⑤"><img src="画像URL⑤" alt=""> カテゴリー名</a>	</li>	<li>	<a href="カテゴリーURL⑥"><img src="画像URL⑥" alt=""> カテゴリー名</a>	</li>
</ul>

ここでやること

HTMLをサイドバーウィジェットの「カスタムHTML」に追加
カテゴリーURL・画像URL・カテゴリー名を変更

画像のサイズはなんでも大丈夫ですが、横長のものはipadで見ると崩れるかもしれません。

マリ

このブログでは100×100を使っています♩

CSSはこちら

HTML

/*サイドバー　メニュー*/
div#sidebar1 ul.widget-menu.dfont.cf{	border-bottom:3px double #fff;
}
div#sidebar1 ul.widget-menu.dfont.cf a{/*ボックス*/	height:70px;	width:100%;	letter-spacing:0.2em;/*テキストリンクの行間*/	color:#333;	font-size:90%;
}
div#sidebar1 ul.widget-menu.dfont.cf img{	padding:2px;	object-fit: cover;	display:block;	height:45px;	width:30%; margin:0 auto;	border-radius:5px;
}
div#sidebar1 ul.widget-menu.dfont.cf a:hover{	opacity: 0.5;	background:#fff!important;
}

ここでやること