1分でハンバーガーメニューをオリジナル画像に変える方法

　Welcartのハンバーガーメニュー、ちょっと独特ですよね？

Welcart Basiceのハンバーガーメニュー

　WelcartBasicでは、横幅1000px以下で、サイトタイトルの下の水平表示のメニューバーが表示されなくなり、代わりに右上にハンバーガーメニューが表示されるようになります。横幅1000px以下の場合なので、スマホだと最初からハンバーガーメニューです。

　この呼び名ご存じでしょうか？↓の画像の右上の三みたいな部分です。

　初期設定でレスポンシブルになっているのはありがたいですが、1000px以下の設定だとタブレットもハンバーガーメニューです。タブレットくらいのサイズなら水平表示のメニューバーのほうが便利な気もします。ここは、今後改善したいと思います。

Welcartでハンバーガーメニューをオリジナル画像に

　今回は、このハンバーガーメニューが、ちょっと分かりにくいので画像に変えた時の方法をご紹介します。初期設定では、FontAwesomeというフォント（フォントアイコンというデザイン用のフォント）の『\f03a』という文字で表記されています。ハンバーガーメニュー以外にも色々とフォントアイコンはあります。次のサイトに一覧が表記されていますのでご覧ください。かわいいものもあります♪
http://fontawesome.io/icons/

　ただ、このハンバーガーメニューは、ちょっと一般的ではないぞ！？と思い、さらに当店「生まれ年ワインショップ」は、生まれ年ワインを検索してたどりついたという方が多いはず。決してネットに詳しいわけではないので、これがメニューかどうかは分かってもらえないと思います。

　そこで、こんな画像にしたいと思います。

ハンバーガーメニューの記載場所

　説明が少し前後しますが、初期設定のハンバーガーメニューは、header.phpにあるのかなと調べても分からず、いくつかファイルを調べていると、スタイルシート（style.css）で設定されていました。なので、これを画像にするのは比較的簡単です。やり方さえ分かっていれば、1分あれば出来ますね！どこに記載されているか調べるのに、結構時間かけたのに(^^ゞ

具体的なハンバーガーメニューの変更方法

　さて、1分で出来る変更方法ですが、子テーマのstyle.cssに次を記載したら変わるはずです。

/* -- ハンバーガーメニューの変更 -- */
#site-navigation label span:before {
	content: url(images/hamburger.jpg);	
}
/* -- ハンバーガーメニューの変更（終了）-- */

　ただし、私はこの画像を子テーマフォルダ内のimageフォルダにアップしたので、上記のような記述になっていますが、画像の保存先が異なる場合は、url()のカッコ内にそのアドレスを記載しなければならないです。

　ついでに、スマホでこのハンバーガーメニューを押して出てくるメニューの背景色を淡いグレーに変えました。以下を子テーマのstyle.cssに追加します。

/* -- ハンバーガーメニューのスライドのバックカラー変更 -- */
@media only screen and (max-width: 1000px)
{
#site-navigation li a {
	display: block;
	margin-bottom: 1.07143em;
	padding-bottom: .357143em;
	border-bottom: 1px solid #e0e0e0 ;
	background-color: #eee;
}
}
/* -- ハンバーガーメニューのスライドのバックカラー変更（終了）-- */

　背景色は最後の#eeeの部分で変えられますので、お好きな色に変えてお使い下さい。

お願い

　検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m