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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
生まれ年ワインショップのハンバーガーメニュー

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

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

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

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

WelcartBasicのハンバーガーメニュー

 初期設定でレスポンシブルになっているのはありがたいですが、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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメント

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください