記事一覧

テーマAttitudeのカスタマイズ~スマホ時のメニューアイコンを変更!

スポンサードリンク
<2017年11月19日追記>
前回、うまくできなかった原因が分かったので、内容を少し修正しました。

このサイトのことじゃなくて、うちの治療院のホームページのことなのですが、WordPressでサイトを作っていて、使っているテンプレートは「Attitude」です。

Attitudeは、見た目の配置とかが好きで選んだのだけど、実は色々と使いづらい。

まず、海外のテンプレートだから、困ったことがあっても、基本、サポートが英語。

それよりもっと困るのが、テンプレートの構造が初心者向きじゃないこと。

多くのテンプレートにある「single.php」がなかったりするし、カスタマイズしたい時に、他のテンプレートを参考にしてもうまくいかないことがわりとあります。

でも、使い続けているわけなんですが・・・今さら変えるのも大変だし。。

で、今回は、前々からずーっと変えたいと思っていた、スマホ表示の時に現れるメニューアイコン(いわゆるハンバーガーメニュー)を変えてみました。
メニューアイコン変えました

メニューだと気づかれない?三本線だけのハンバーガーメニューを変えたい!


Attitudeのメニュー画面は、パソコンで見ると、上の方に横並びでテキスト表示されています。

pcattitude.png

『HOMEPAGE』『 LAYOUTS』『BLOG』『TYPOGRAPHY』『SUPPORT』 「UPGRADE 』 『TO PRO』ってやつですね。

これがスマホだと、右上に三本線のアイコン(ハンバーガーメニュー)だけの表示です。

spattitude.png

うちの治療院は、30~40才くらいの人がよく来るけど、50歳以上も普通に来ます。

最近は、年寄りもスマホで検索して治療院を探す時代。

だけど、「三本線のアイコンだけで、それをクリックしたら、メニューが表示されるって、みんな分かるのかな~??」という疑問が常々ありまして。

実はメニューアイコンに気が付かないで、「見づらいサイトだな・・・」なんて、バッテン印で閉じられているのでは?という恐怖が以前からあったのですよ。

こんなデータもあるようです。

menuデザイン

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;
}



こうすると、こんな感じで表示されます。

menuiconsp.png

子テーマを作ってこのコードを使う場合は、スマホなどの小さい画面の時だけこのメニューボタンを表示させるという条件付けをしないといけないので、

/* 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;
}
}


これで、うまくいくと思います。


スポンサードリンク
関連記事

こちらの記事もどうぞ

コメント

コメントの投稿

非公開コメント

スポンサードリンク

利用してるサイト

鍼灸用品が買えるショップ

備品とか色々・・・

  • Amazon
  • 送料無料なので利用しやすい。インクプリンタなどOAサプライ品は安くていつも利用しています。

  • 楽天ブックス
  • 送料無料で本が注文できます。
  • Fujisan.co.jp
  • 医学系の本・雑誌ならここ。他にはない本や雑誌があります。

文具・日用品など

私はカルテ関連品をアスクルで買っています。1,000円以上送料無料です。

チラシ・名刺印刷など

チラシや名刺印刷が安い。WordファイルでもOK。
公式サイト→ラクスル

→ラクスルチラシの記事
→ラクスル名刺作成の記事

院内インテリアや家具系

パーテーションはここで買いました。安くて良いもので気に入っています。


新規客を無料集客

無料で店舗が登録できる口コミランキングサイト。知り合いのツテじゃない初めてのお客さんはエキテン経由でした!以後も継続的に新規のお客様が来ています
→エキテンの紹介記事はこちら

ホームページ作成

簡単・低コスト。ブログ感覚で、簡単にホームページが作れるサービス。
→グーペの紹介記事はこちら

よく読まれている記事

スポンサードリンク

月別アーカイブ

サイト内検索

メールフォーム

名前:
メール:
件名:
本文: