こんにちは。マリ(@damarino_oheya)です!
このブログはワードプレス有料テーマの「SANGO」を使っています。
SANGOを使えばトップページやサイドバーにメニューボックスを簡単に設置することができます。
なんですけど、FontAwesomeのアイコンではなくオリジナルアイコンにするべく、このブログでは少しカスタマイズしています。

FontAwesomeのアイコン

自作アイコン
POINT
- FontAwesomeではなくオリジナルアイコンへ
- サイズは100×100推奨
マリ
透過済みのアイコンなら背景色も変えられますよ。
この記事では、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法をまとめています。
MEMO
サイドバーのメニューボックスに使えます。デザインを確認しているデバイスは、MacBook Air・iPad・iPhone6の3つのみです。
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;
}
ここでやること
- CSSをコピペします
- 背景色を変えたいときは
/*ボックス*/
にbackground:お好きな色;
を加してください♩
SANGOのメニューボックスのカスタマイズまとめ
というわけで、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法でした♩
手順としては、
- 画像をアップロードする
- サイドバーに「カスタムHTML」を作る
- ↓のHTMLをコピペ&画像URLとかを変更
- ↓のCSSを追加
これでオリジナルアイコンを使ったメニューボックスの完成です♩
SANGOでメニューボックスを作るのは簡単ですが、オリジナル感を出したいな〜と思いカスタマイズした次第です。
SANGOのマテリアル感が薄れてしまいますが、オリジナル感を出したい方におすすめです♩
(もし使ってみて「ここ変!」「反映されない!」とかあったら対応するのでツイッター(@damarino_oheya)かコメント欄かお問い合わせページから教えていだだくと幸いです。)
このような記事もあります
SANGOでトップページをホームページっぽくシンプルにカスタマイズしました|TOPのホーム固定


[…] 参考 SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使うカスタマイズmigaru-days […]
[…] Migaru-Days SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使うカスタマイズ こんにちは。マリ(@damarino_oheya)です! このブログはワードプレス有料テーマの「SANG […]