こんにちは。マリ（＠damarino_oheya）です！
このブログはワードプレス有料テーマの「SANGO」を使っています。
SANGOを使えばトップページやサイドバーにメニューボックスを簡単に設置することができます。
[list class="li-yubi li-mainbdr main-c-before"]
[/list]
なんですけど、FontAwesomeのアイコンではなくオリジナルアイコンにするべく、このブログでは少しカスタマイズしています。
[center]
[yoko2 responsive][cell]
FontAwesomeのアイコン[/cell][cell]
自作アイコン[/cell][/yoko2]
[/center]
[box class="box27" title="POINT"]
- FontAwesomeではなくオリジナルアイコンへ
- サイズは100×100推奨
[/box]
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"] 透過済みのアイコンなら背景色も変えられますよ。[/say]
この記事では、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法をまとめています。
[memo title="MEMO"]サイドバーのメニューボックスに使えます。デザインを確認しているデバイスは、MacBook Air・iPad・iPhone6の3つのみです。[/memo]
SANGOのメニューボックスをカスタマイズする方法
メニューボックスでオリジナルアイコンを使う手順としては、
- 画像をアップロードする
- サイドバーに「カスタムHTML」を作る
- ↓のHTMLをコピペ＆画像URLとかを変更
- ↓のCSSを追加
これでオリジナルアイコンを使ったメニューボックスの完成です♩
HTMLはこちら
[codebox title="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>[/codebox]
[memo title="ここでやること"]
- HTMLをサイドバーウィジェットの「カスタムHTML」に追加
- カテゴリーURL・画像URL・カテゴリー名を変更
[/memo]
画像のサイズはなんでも大丈夫ですが、横長のものはipadで見ると崩れるかもしれません。
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]このブログでは100×100を使っています♩[/say]
CSSはこちら
[codebox title="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;
}[/codebox]
[memo title="ここでやること"]
- CSSをコピペします
- 背景色を変えたいときは
/*ボックス*/にbackground:お好きな色;を加してください♩
[/memo]
SANGOのメニューボックスのカスタマイズまとめ
というわけで、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法でした♩
手順としては、
- 画像をアップロードする
- サイドバーに「カスタムHTML」を作る
- ↓のHTMLをコピペ＆画像URLとかを変更
- ↓のCSSを追加
これでオリジナルアイコンを使ったメニューボックスの完成です♩
SANGOでメニューボックスを作るのは簡単ですが、オリジナル感を出したいな〜と思いカスタマイズした次第です。
SANGOのマテリアル感が薄れてしまいますが、オリジナル感を出したい方におすすめです♩
[box class="box2" title="参考"]
[/box]
（もし使ってみて「ここ変！」「反映されない！」とかあったら対応するのでツイッター（＠damarino_oheya）かコメント欄かお問い合わせページから教えていだだくと幸いです。）
このような記事もあります
[kanren id="10378,1851"]
