更新:2017年06月01日WordPressでスマートフォン表示やタブレット表示などの狭い画面では、下部にナビゲーションボタンがあると便利です。一般的にオーバーレイボタンと呼ばれますが、制作するのには出来そうで難しいのです。今回は作り方を解説いたします。WordPressのプラグインなしで、1からCSSやjQueryで実装します。オーバーレイボタンがあると、狭い画面で効率的にスペースが有効活用できます。クリックされやすいので、目的とするコンテンツにサイト訪問者を案内できます。まとめメリットスマートフォンの狭い画面を有効活用してオーバーレイナビゲーションボタンを実装。クリックされやすいため、アクセスして欲しいコンテンツのリンクが設定できる。プラグインなしで制作するのでカスタマイズがしやすい。一方でデメリットもあります。WordPressサイトにオーバーレイ広告を設置している位置は、オーバーレイボタンと重なるため、同時に表示することはしません。2つとも表示することはできますが、画面が狭く圧迫感が出て、サイトが見づらくなります。オーバレイ広告を選ぶかオーバーレイボタンを選ぶかは運営するサイトに合わせて検討ください。設置方法1.オーバーレイボタンを表示するhtmlを記述します。?>や</body>の直前に記述します。ログイン、ページトップへ戻るボタンの4つで構成しています。運営するサイトに合わせて、オーバーレイボタンに表示するコンテンツを決めてください。オーバーレイボタンには、「星」や「虫眼鏡」などそれぞれアイコンが表示されています。Awesomeを使用しています。Awesomeとは、Webアイコンフォントであり、スマートフォンやタブレットなどの高解像度なデバイスで表示しても、高画像で表示できます。Awesomeを使っています。Awesomeを設置する場所は、ヘッダーにコードを設置して読み込み必要があります。以下のコードをヘッダーに記述します。Awesomeのアイコンは様々な種類が存在します。Awesomeのサイトで確認してください。2.オーバーレイボタンのCSSのコードを記述します。(style.css)に記述します。(max-width:767px)を使用して、画面サイズが767px以下になると、オーバーレイボタンが表示されるようにしています。運営するサイトに合わせて、画面サイズの767pxは変えてください。3.オーバーレイボタンを表示するためのjQueryを設定します。サイトを表示したときに画面上部ではオーバーレイボタンは非表示になっています。下方向にスクロールすると上に飛び出してきます。header.phpの</head>の直前にjQueryのファイルを読み込む以下のコードを記述してください。charset="UTF-8"></script>get_template_directory_uri();で使用中テーマのフォルダから「olayBtn.js」を読み込みます。次に「olayBtn.js」ファイルを作成して、テーマフォルダにアップロードする必要があります。「olayBtn.js」ファイルは、FTPなどを使用してアップロードしてください。以下のソースコードをエディターで記述して、「olayBtn.js」と名前をつけて保存します。jQuery('#olayBtn');は、ボタンに指定するID名です。'-100px');は、スクロール前のポジション位置を指定します。100)は、ウィンドウ上部からスクロールした際に、指定の位置を超すと表示されます。200);は、指定の位置を超えた際のポジションと表示スピードの指定です。200);は、ウィンドウ上部に戻った際のポジションと表示スピードの指定です。400);は、トップページへ戻るボタンがウィンドウ上部に戻る際の、スクロールスピードの指定です。注意事項jQueryでは、通常「$」という記号を使用しますが、WordPressプラグインでも「$」を使用しているので、両方を同時に読み込むとコンフリクト(衝突)が起こって、正常に動作しなくなります。そのため、「$」を「jQuery」に変更しています。「jQuery」に置き換えるとコンフリクトを回避できます。WordPressプラグインだけでなくprototype.jpやMooToolsなどのJavaScriptライブラリと併用するときは、「jQuery」で全てが解決できるわけではありません。他のライブラリと併用するなら、他のスクリプトが正常に動作するか、そのつど確認してください。カスタマイズこのページで紹介したオーバーレイボタンは、画面サイズが767px以下になると表示されます。オーバーレイボタンには「トップへ戻る」ボタンが実装されています。画面サイズが768px以上になると「トップへ戻る」ボタンが消えますので、別に作成する必要があります。画面サイズが768px以上では、次のような通常の「トップへ戻る」ボタンが表示されるようにします。画面サイズが767px以下では、次のような「トップへ戻る」ボタンが表示されるようにします。1.まずは画面サイズが768px以上で表示される通常の「トップへ戻る」を作ります。過去の記事に「トップへ戻る」ボタンの制作方法を紹介した記事がありますので、参考にしてください。画面サイズが768px以上で表示される通常の「トップへ戻る」ボタンは、画面サイズが767px以下になっても消えることはないため、オーバーレイボタンとの2重表示になります。オーバーレイボタンはz-indexが1000に設定されているので、通常の「トップへ戻る」ボタンに重なるように一番上に表示されるので特に問題はありません。通常の「トップへ戻る」ボタンを画面サイズが767px以下では非表示にしたいなら、以下のcssを追加します。!important;}}なお、ここまでの説明で画面が切り替わるブレークポイントを768pxに設計したレスポンシブサイトを前提に解説しました。厳格にスマートフォンやタブレットのみオーバーレイボタンに表示したい場所は、以下の記事を参考にしてください。スマートフォン・タブレットでのみ広告や内容を表示する方法PHPがデバイスを判別して、パソコンで表示するものとスマートフォンやタブレットで表示するものを確実に分けることができます。まとめスマートフォンなどの狭い画面を有効活用するオーバーレイボタンの作り方を解説しました。実際にサイトに表示するとサイト訪問者に的確にナビゲーションやコンテンツが知らせることができて便利です。カスタマイズすれば、オーバーレイボタン部分に広告を表示したりも可能です。オーバーレイボタンのcolorやアイコンなども変えてみて、色々と設計してください。コメントをキャンセルメールアドレスが公開されることはありません。