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

こんにちは。マリ(@damarino_oheya)です!

 

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

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

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

FontAwesomeのアイコン

自作アイコン

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

マリ

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

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

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

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

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

  1. 画像をアップロードする
  2. サイドバーに「カスタムHTML」を作る
  3. ↓のHTMLをコピペ&画像URLとかを変更
  4. ↓の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>
ここでやること
  1. HTMLをサイドバーウィジェットの「カスタムHTML」に追加
  2. カテゴリー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;
}
ここでやること
  1. CSSをコピペします
  2. 背景色を変えたいときは/*ボックス*/background:お好きな色;を加してください♩

 

SANGOのメニューボックスのカスタマイズまとめ

というわけで、SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使う方法でした♩

手順としては、

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

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

 

SANGOでメニューボックスを作るのは簡単ですが、オリジナル感を出したいな〜と思いカスタマイズした次第です。

SANGOのマテリアル感が薄れてしまいますが、オリジナル感を出したい方におすすめです♩

(もし使ってみて「ここ変!」「反映されない!」とかあったら対応するのでツイッター(@damarino_oheya)かコメント欄かお問い合わせページから教えていだだくと幸いです。)

このような記事もあります

SANGOでトップページをホームページっぽくシンプルにカスタマイズしました|TOPのホーム固定ひとりSlackでブログのタスク管理がいい感じ

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。

2 + thirteen =