小さな会社の経営者の最強ホームページ戦略

売上アップを目指す方へのWebマーケティング必勝法!

スマートフォン(スマホ)対応メニュー。(WordPress対応可・サンプルダウンロード・デモページあり)

スマートフォン(スマホ)対応メニュー。(WordPress対応可・サンプルダウンロード・デモページあり)

どうも、ホームページ制作をしている本田と言います。

今日はスマホ対応に対応した、ホームページのグローバルメニューのサンプルです。
(デモページ&サンプルダウンロード付き)

これからのホームページは、スマートフォンへ対応していないと集客は難しいでしょう。
ホームページにWordPress(ワードプレス)のようなCMSを使っている場合は、スマホに対応したレスポンシブデザインのテンプレートで、メニュー部分についてはおそらく問題はないでしょう。

HTMLで作られている場合や、WordPressへの組み込みを考えているのであれば、このサンプルを使えば簡単にスマートフォンに対応したメニューが出来ます。

今回のメニューはjQueryを使った、シンプルなメニューです。
また、ワードプレスへの埋め込みヘッダーもサンプルに付けてありますので、ワードプレスへの導入も比較的簡単に出来ます。
※一部修正が必要になります。

2015-11-23-01

HTML

 

 HTML解説

まず、ヘッダー部分に、jQueryの読み込みリンクと、メニューを動かすtool.jsへのリンクを追加します。

メニュー本体はnavタグ内で記述しているスタイルシートのクラスmod_navで表示の制御をします。
PCでの表示は、一般的?なナビゲーションメニューですが、スマホでの表示は、jQueryの機能を使った折りたたみ式のメニューになります。
ポイントは、19行目のclass=”mod_nav”で、PC表示では【MENU】の表示をスタイルシートで非表示にしています。
この【MENU】表示はスマホ・タブレットでの場合に表示されるようになっています。
(横幅768px以下になった時に表示)

 

Java Script:tool.js

Java Script解説

このJava Scriptの動きは、横幅768px以上では通常の表示。
以下の画面サイズであれば、スマホ対応となっています。
表示の切り替えサイズを変更したい場合は、28行目var x = 768;の値を変更してください。

 

CSS(スタイルシート)

 スタイルシート解説

このスタイルシートには、ナビ部分のモノしか表示しておりません。※サンプルには全てのCSSが記入してあります。

スタイルシートについては、基本的に表示関連の指定しかしません。
スマホ対応に伴うメニューの変化はjQueryに処理を任せているので、カラーやフォントサイズを決めているだけです。
こうした変化は実際にサンプルをダウンロードして頂き、ご自身で理解された方が早いと思います。

 

WordPress用 header.php

サンプルファイル内にWordPress(ワードプレス)用のheader.phpがあります。
header.phpの内容を設置する環境に合わせて修正すれば、簡単にレスポンシブ対応のメニューが使えるようになります。

 header.php解説

基本的に、余計なモノ(ロゴマークなど)のないシンプルなヘッダーです。
変更箇所は、tool.jsへのルートパスを正確に書いてください。(このパスが間違っていると動作しません)
CSSファイルの中身を、お使いのテーマスタイルのstyle.cssへコピーしてください。

注意
このサンプルは単体での動作を前提にしているので、jQueryへのリンク先がヘッダー内にあります。(12行目)
通常のWordPressテーマを使って、このメニューを追記する場合、別のjQueryが用意されているので、この内容をそのままコピーして使うと、jQueryを二重に読み込む事になり、上手く動作しない事があります。
上手く動作しない場合は、jQueryの読み込みが重複していないか確認してください。

 

demo_button

サンプルデータダウンロード

 

これからのホームページはスマートフォンへの対応が必須です。
Goolgeも対スマートフォン検索に力を入れていて、スマホからの検索結果には、ホームページがスマートフォンに対応しているページかどうかの表示がされる様になっています。

またホームページ解析のGoogleAnalyticsでは、スマホ対応だけでなく、細かい注意書き(アラート)が表示されて、スマートフォンに対応していても、フォントサイズが小さいとか、ボタン画像が近すぎて、ボタンを押し間違える可能性があるなどの、修正指示が出ます。

現状はこうした注意が検索順位に反映される事は無いようですが、今後どうなるかは解りません。
いずれにしても、スマートフォンでアクセスしたページがスマホ対応していないと、その場で離脱(ページを閉じてします)してしまう可能性も高いので、これからのホームページ制作は、スマートフォン対応が必至になってくるでしょう。
せっかく検索から来たお客さんが逃げてしまうようでは、ホームページとしての意味もありませんし……

特に集客目的でホームページを運営しているのであれば、スマートフォン対応は必須です。
ホームページをスマートフォンに対応したページにする為には、幾つかの方法がありますが、それはまた後日。

この記事に関してのご意見。ご質問があればコメント欄にお願いします。

WordPress(ワードプレス)やホームページ制作、また集客に関するご相談を無料で受付けております。

 


ホームページに関するお悩み無料相談

ホームページでのお悩みはありませんか?

・集客が上手く行かない。
・何をやればいいのかわからない。
・今のホームページでいいのか?
・ホームページ運営のコツを教えてほしい。
・自社のホームページの悪いところを教えてほしい。

など。

ホームページに関するご相談を受付けております。
ご相談は無料です。まずはご連絡ください。

無料ご相談フォーム

お名前

会社名

お電話

メールアドレス

都道府県

ホームページURL

お問い合わせ内容

  

Return Top