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;
}

ここでやること