cssでメニューをかわいいアイコン風デザインにする(WordPressのプラグインもありました)

Cssでメニューをかわいいアイコン風デザインにしました。一応、プラグインも調べましたよ。初心者でもOKです。

「menu image」はアイコン付きのメニューが簡単に作成できるWordPressのプラグイン

アイコン付きのメニューが簡単にできるmenu imageです。

12436288584_94d6bc46d2_b.jpg
Adds a field to load the image in a menu item and displays the image inside the link in the menu before the text.

使い方はメディアにアップロードしたアイコンをメニュー画面で設定するだけの簡単なものようです。画像サイズは「24×24」、「36×36」 、「48×48」を選べ、位置は前後選べるようです。

gifやpngを使えるみたいですが、gifアニメーションやapngなども大丈夫なのかは気になるところです。

ただ、今回はプラグインの採用は見送りました。

おすすめ記事

結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?

プラグインなしでも簡単に実装

今回はあるWordpressの仕様に気付いてプラグインなしで実装することにしました。なんとなくできる気がしていたのですが、なんてことないナビゲーションラベルでhtmlタグが普通に使えるっぽいからです。

htmlです。

メニュー <span class="red-label">Hot♪</span>

WordPressの外観 > メニュー > ナビゲーションラベルにHtmlタグを突っ込みます。もちろん位置は前後可能です。

何事も試してみるべきというか、プログラミングってほどでもないですが、ちょっとした思いつきですね。

それさえわかれば、とっても簡単です。画像なしのマークでもいいかな、と思いました。

cssです。

.red-label{
	background: #cf7070;
	color: white;
  	padding: 3px;
	border-radius: 3px; 
}

他の色も用意してみましょうか。

.green-label{
	background: #72b6af;
	color: white;
  	padding: 3px;
	border-radius: 3px; 
}

いろいろな色を用意して、かわいい角丸のデザインにしました。Hot♪やNEW!などお知らせがある場合、利用できます。

必要ならフォントサイズもやや小さめの方がいいかもしれません。

隣のテキストと上下の位置があわないときは、vertical-alignで調整しましょう。プラスにすると上にマイナスにすると下にずれます。

vertical-align: 3px;

現在、「あいおんな」のメニューはこの方法で作成しています。完成デモは当サイトをご覧ください。もちろん、Wordpressのデフォルト機能を使っているため、スマホも問題ありません。アニメーションGifなどにもそのうち対応したいですね。

今回はカスタマイズというほど難しいものではありませんが、簡単に作れるわりに視認性やユーザービリティの効果は高そうです。参考になれば幸いです。

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ

医療脱毛でおすすめで安いのは?比較と口コミなら「あいおんな」 脱毛サロンでおすすめで安いのは?比較と口コミなら「あいおんな」