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
コメント