鍼灸マッサージ治療院を開業して5年目。個人経営の店舗で使えそうなモノやサービスなど情報をシェアします記事一覧テーマAttitudeのカスタマイズ~スマホ時のメニューアイコンを変更!2017/11/1914:32スポンサードリンク<2017年11月19日追記>前回、うまくできなかった原因が分かったので、内容を少し修正しました。このサイトのことじゃなくて、うちの治療院のホームページのことなのですが、WordPressでサイトを作っていて、使っているテンプレートは「Attitude」です。Attitudeは、見た目の配置とかが好きで選んだのだけど、実は色々と使いづらい。海外のテンプレートだから、困ったことがあっても、基本、サポートが英語。それよりもっと困るのが、テンプレートの構造が初心者向きじゃないこと。多くのテンプレートにある「single.php」がなかったりするし、カスタマイズしたい時に、他のテンプレートを参考にしてもうまくいかないことがわりとあります。使い続けているわけなんですが・・・今さら変えるのも大変だし。今回は、前々からずーっと変えたいと思っていた、スマホ表示の時に現れるメニューアイコン(いわゆるハンバーガーメニュー)を変えてみました。メニューだと気づかれない?三本線だけのハンバーガーメニューを変えたい!Attitudeのメニュー画面は、パソコンで見ると、上の方に横並びでテキスト表示されています。PRO』ってやつですね。これがスマホだと、右上に三本線のアイコン(ハンバーガーメニュー)だけの表示です。うちの治療院は、30~40才くらいの人がよく来るけど、50歳以上も普通に来ます。最近は、年寄りもスマホで検索して治療院を探す時代。「三本線のアイコンだけで、それをクリックしたら、メニューが表示されるって、みんな分かるのかな~??」という疑問が常々ありまして。実はメニューアイコンに気が付かないで、「見づらいサイトだな・・・」なんて、バッテン印で閉じられているのでは?という恐怖が以前からあったのですよ。こんなデータもあるようです。3本線だけだと、ちょっとクリック率が落ちるみたい。出典はこちら→https://exisweb.net/mobile-menu-icons日本語のサイトだと、こちらのサイトが分かりやすいです。http://dtp.jdash.info/archives/Hamburger_Menu_Test_2014このサイト見てたら、3本線だけで、さらに枠線がないタイプ(←まさにうちの治療院のやつ)が、一番クリック率が悪いらしい!!ダメじゃん!!「スマホユーザーが多いし、なんとかしたい!」と思っていたのに、変更するやり方がイマイチわかんなくて、放置していました。最近治療院のホームページの検索順位がちょっと落ちてきまして。来院数も減ってきた(泣)下がったきっかけは、独自ドメインに変更したことなのですが(最初から独自ドメインにしとけばいいのにケチるからこんなことに涙)、ここから這い上がらなきゃいけない!!こうなったら、サイト改善できるところから直してユーザビリティをあげておくべき。やれることはやっておこう!と。やってみたらできたので、やり方をメモ変わりに書いておきます。ちなみに、WEB作成は完全に素人なので、もっといい方法や、何か問題点がある可能性もあります。お気づきのことがありましたら、教えていただけると助かります。ハンバーガーメニューに「MENU」の文字を入れるカスタマイズ変更する箇所は、スタイルシートです。'\f0c9';というのが、三本線のアイコンを表しているようです。ちなみに、この3本線はGenericonsというフォントを使って表示しているらしい。MENU";という風に変えました。このままだと、ボタンっぽくないので、周りに線で囲むデザインにして、ボタンサイズもちょっと大きめに・・・など、デザインを整えて、次のようにしました。inherit;}こうすると、こんな感じで表示されます。{で、先ほどのコードを囲みます。親テーマのスタイルシーにトは、少し離れた上の方に、元々これが書かれています。子テーマの場合は、次のコードになります。inherit;}}これで、うまくいくと思います。