テーマAttitudeのカスタマイズ～スマホ時のメニューアイコンを変更！
- 2017/11/19
- 14:32
スポンサードリンク
＜2017年11月19日追記＞前回、うまくできなかった原因が分かったので、内容を少し修正しました。
このサイトのことじゃなくて、うちの治療院のホームページのことなのですが、WordPressでサイトを作っていて、使っているテンプレートは「Attitude」です。
Attitudeは、見た目の配置とかが好きで選んだのだけど、実は色々と使いづらい。
まず、海外のテンプレートだから、困ったことがあっても、基本、サポートが英語。
それよりもっと困るのが、テンプレートの構造が初心者向きじゃないこと。
多くのテンプレートにある「single.php」がなかったりするし、カスタマイズしたい時に、他のテンプレートを参考にしてもうまくいかないことがわりとあります。
でも、使い続けているわけなんですが・・・今さら変えるのも大変だし。。
で、今回は、前々からずーっと変えたいと思っていた、スマホ表示の時に現れるメニューアイコン（いわゆるハンバーガーメニュー）を変えてみました。
メニューだと気づかれない？三本線だけのハンバーガーメニューを変えたい！
Attitudeのメニュー画面は、パソコンで見ると、上の方に横並びでテキスト表示されています。
『HOMEPAGE』『 LAYOUTS』『BLOG』『TYPOGRAPHY』『SUPPORT』 「UPGRADE 』 『TO PRO』ってやつですね。
これがスマホだと、右上に三本線のアイコン（ハンバーガーメニュー）だけの表示です。
うちの治療院は、30～40才くらいの人がよく来るけど、50歳以上も普通に来ます。
最近は、年寄りもスマホで検索して治療院を探す時代。
だけど、「三本線のアイコンだけで、それをクリックしたら、メニューが表示されるって、みんな分かるのかな～？？」という疑問が常々ありまして。
実はメニューアイコンに気が付かないで、「見づらいサイトだな・・・」なんて、バッテン印で閉じられているのでは？という恐怖が以前からあったのですよ。
こんなデータもあるようです。
3本線だけだと、ちょっとクリック率が落ちるみたい。
出典はこちら→https://exisweb.net/mobile-menu-icons
日本語のサイトだと、こちらのサイトが分かりやすいです。
http://dtp.jdash.info/archives/Hamburger_Menu_Test_2014
このサイト見てたら、3本線だけで、さらに枠線がないタイプ（←まさにうちの治療院のやつ）が、一番クリック率が悪いらしい！！
ダメじゃん！！
「スマホユーザーが多いし、なんとかしたい！」と思っていたのに、変更するやり方がイマイチわかんなくて、放置していました。
しかし、最近治療院のホームページの検索順位がちょっと落ちてきまして。。。
来院数も減ってきた（泣）
下がったきっかけは、独自ドメインに変更したことなのですが（最初から独自ドメインにしとけばいいのにケチるからこんなことに涙）、ここから這い上がらなきゃいけない！！
こうなったら、サイト改善できるところから直してユーザビリティをあげておくべき。やれることはやっておこう！
と。
重い腰を上げました。
やってみたらできたので、やり方をメモ変わりに書いておきます。
ちなみに、WEB作成は完全に素人なので、もっといい方法や、何か問題点がある可能性もあります。お気づきのことがありましたら、教えていただけると助かります。
ハンバーガーメニューに「MENU」の文字を入れるカスタマイズ
変更する箇所は、スタイルシートです。
/* Responsive Navigation */
.menu-toggle {
display: block;
background-color: rgba(0, 0, 0, 0);
font-size: 0;
border: 0 none;
padding: 0;
color: #999;
width: 24px;
height: 21px;
float: right;
margin-top: 3px;
cursor: pointer;
}
.menu-toggle:before {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 28px;
line-height: 0;
font-family: 'FontAwesome';
vertical-align: top;
content: '\f0c9';
}
.root {
display: none;
}
.toggled-on .root {
display: block;
}
#access {
border-top: 0 none;
}
#access li {
position: inherit;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-right: 0;
}
#access a {
float: none;
padding: 10px 0;
height: inherit;
}
この中の、
content: '\f0c9';
というのが、三本線のアイコンを表しているようです。
ちなみに、この3本線はGenericonsというフォントを使って表示しているらしい。
なので、これを
content:'\f0c9' " MENU";
という風に変えました。
このままだと、ボタンっぽくないので、周りに線で囲むデザインにして、ボタンサイズもちょっと大きめに・・・
など、デザインを整えて、次のようにしました。
/* Responsive Navigation */
.menu-toggle {
display: block;
background-color: rgba(0, 0, 0, 0);
font-size: 0;
border: 0 none;
padding: 0;
color: #999;
width: 70px;
height: 30px;
float: right;
margin-top: 3px;
cursor: pointer;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0px 0px 10px #c3e1ff;
}
.menu-toggle:before {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0;
font-family: 'FontAwesome';
vertical-align: top;
font-size:12px;
font-weight:bold;
content:'\f0c9' " MENU";
}
.root {
display: none;
}
.toggled-on .root {
display: block;
}
#access {
border-top: 0 none;
}
#access li {
position: inherit;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-right: 0;
}
#access a {
float: none;
padding: 10px 0;
height: inherit;
}
こうすると、こんな感じで表示されます。
子テーマを作ってこのコードを使う場合は、スマホなどの小さい画面の時だけこのメニューボタンを表示させるという条件付けをしないといけないので、
/* All Mobile Portrait size smaller than 768 (devices and browsers) */
@media only screen and (max-width: 767px) {
と、
{で、先ほどのコードを囲みます。
親テーマのスタイルシーにトは、少し離れた上の方に、元々これが書かれています。
子テーマの場合は、次のコードになります。
/* All Mobile Portrait size smaller than 768 (devices and browsers) */
@media only screen and (max-width: 767px) {
/* Responsive Navigation */
.menu-toggle {
display: block;
background-color: rgba(0, 0, 0, 0);
font-size: 0;
border: 0 none;
padding: 0;
color: #999;
width: 70px;
height: 40px;
float: right;
margin-top: 3px;
cursor: pointer;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0px 0px 10px #c3e1ff;
}
.menu-toggle:before {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0;
font-family: 'FontAwesome';
vertical-align: top;
font-size:12px;
font-weight:bold;
content:'\f0c9' " MENU";
}
.root {
display: none;
}
.toggled-on .root {
display: block;
}
#access {
border-top: 0 none;
}
#access li {
position: inherit;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-right: 0;
}
#access a {
float: none;
padding: 10px 0;
height: inherit;
}
}
これで、うまくいくと思います。
スポンサードリンク
- 関連記事
-
- テーマAttitudeのカスタマイズ～スマホ時のメニューアイコンを変更！
- サイト速度を改善するため、使っていないWordPress ワードプレス を削除した
- 関連記事の表示～WordPressテーマAttitudeカスタマイズ
- テーマ Attitudeで 『>>Previous』 を 『>>前のページ』に変更する
- テーマAttitudeのカスタマイズ～フッターのコピーライト表示変更
こちらの記事もどうぞ
トラックバック
PR
 |
 |
 |
