web制作番外編 スマホサイトなどでよく見る飛び出すサイドバーを実装する方法

サイトをスマホに対応させよう

皆さんこんにちは。
最近ウェブサイトを作成するときに強く感じるのは、スマホに対応させなければならないということです。

そもそもこのサイトがスマホに対応したデザインではないということは、一旦無視して続きをお読み下さいm(_ _)m

スマホからのアクセスが無視できない水準になっており、パソコンより小さい画面でも快適に利用できるように意識しなければなりません。

そこで今回は、FacebookやYouTubeなどでよく見られる、横にせり出すサイドバーの実装方法についてご紹介しておきます。

ちなみに管理人は、WordPressでサイトを作成しておりますので、他のCMSの場合、ちょっとやり方が違うかもしれません。

使うのはjQueryの「sidr」というプラグインです。

〜インデックス〜

ファイルを準備する

アップロードして読み込む

シンプルなもので試す

固定ページを読み込む

テンプレートを別に作成する

画像を準備する

CSSで調整する

Safariでうまく動かない場合は

そもそもjQueryがうまく動かない場合は

ファイルを準備する

jQueryがサイトにアップロードされていない場合は、まず「jQuery.js」というファイルを入手する必要があります。下記のサイトから入手しておいて下さい。なお、jQueryは最新のものを入手するようにした方が良さそうです。

→jQuery.jsの入手先

jQuery.jsを入手してアップロードした、または既にサイト上に備わっているという方は、次に進みます。

次は、Sidrの公式サイトから、jquery.sidr.min.jsファイルとjquery.sidr.dark.cssファイルを入手します。ダウンロードボタンを押すと、セットで入手できます。

→Sidrの公式サイト

jQuery配布サイトの中には、ファイル形式ではなく、ブラウザで表示する形式で配布を行っている場合があります。その場合は、表示されたコードを全て選択してコピーし、お手持ちのテキストエディタなどに貼り付け、名前を付けて保存すればオッケーです。

サイト作成に役立つフリーソフトは、こちらの「インターネットビジネスを100倍加速させるフリーソフト」という記事で紹介しておりますので、もしテキストエディタや画像編集ソフトなどをお持ちでない場合は、参考にしてみて下さい。

アップロードして読み込む

さて、上記3つのファイル（jQuery.jsとjquery.sidr.min.jsとjquery.sidr.dark.css）を入手したら、それぞれ所定の位置にアップロードをします。

WordPressのデフォルトテーマでは、jsやcssというディレクトリがありますので、その中に格納しておけば問題ありません。それらのディレクトリが存在しないテーマを使用している場合、新たにディレクトリを作成しても大丈夫です。

アップロードが完了したら、パスに注意しながら読み込みます。jQueryは、どこに呼び出しコードを書くかで動く動かないが決まるデリケートなモノですので、記述する場所が重要だと思います。管理人は、記述する場所を間違えたり、パスを間違えたりしてなかなか動かないという苦い経験があります。

結果から言うと、Sidrの場合、cssはhead内で読み込み、jsはbody内で読み込むことで、正常に動作するようになりました。

読み込む際にオススメの方法は、WordPress特有のタグを使用することです（WordPress以外でも使えたりして…）。

<?php bloginfo('template_url'); ?>

というタグを使えば、いちいち絶対パスを書き込まなくても読み込んでくれます。

テーマ内のcssフォルダにjquery.sidr.dark.cssをアップロードした場合、head内に

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.sidr.dark.css">

と記述すれば、読み込んでくれます。

テーマ内のjsフォルダにjQuery.jsとjquery.sidr.min.jsをアップロードした場合、body内に

<script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.sidr.min.js"></script>

と記述すればjsファイルを読み込んでくれます。

シンプルなもので試す

まずは動くか動かないかが重要ですので、シンプルなもので試してみましょう。Sidrの公式サイトにあるコードを拝借して、動作確認してみましょう。サイドバーを飛び出させる起点となるボタンを設置したい場所（通常は画面の右上か左上）に、下記のコードを書きます。

<a id="simple-menu" href="#sidr">Toogle menu</a>
 
<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

まずはこのようなシンプルなものにしておき、動作を確認します。リストにリンクが張られていませんので、飛び出したサイドバーのリストをいくらクリックしても、なんにもなりません。

固定ページを読み込む

動作確認が取れたら、実際にリンクを張ってみましょう。管理人は、スマホサイトはグローバルナビゲーションではなく、横にせり出すサイドバーに固定ページ一覧を挿入したかったので、存在する固定ページを全て呼び出すタグを利用して固定ページ一覧を表示させました。

参考までに、管理人が使っているコードを載せておきます。右側にせり出すタイプです。

<div class="menu_sidr"><a class="right-menu" href="#right-menu"></a></div>
 

  
<div id="sidr-right">
  <!-- Your content -->
  <ul>
        <?php wp_list_pages('title_li=<h2>' . __('ここに好きなタイトルを入力') . '</h2>' ); ?>  
	<li><a href="ここにブログ一覧ページのURLを記述" title="最近の投稿を見る">最近の投稿を見る</a></li>
	<li><a class="right-menu">←戻る</a></li>
  </ul>
</div>
  
<script>
$(document).ready(function() {
    $('.right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>

このように記述すれば、固定ページを全て呼び出すことができます。リストの下2つはオマケです。ブログ一覧ページと、サイドバーをしまうボタンを付けてみました。

リストの中は自由に変更可能ですし、増減も自在です。好きなようにカスタマイズしてみて下さい。

aをidではなくclassで指定しているのは、1ページに何カ所か設置することを想定して記述しているためです。1ページにつき1カ所だけ設置する場合は、id属性のままで構いません。

テンプレートを別に作成する

上記のコードを見て分かる通り、記述が冗長です。管理人はヘッダーに挿入しているのですが、記述が長いため、別にphpファイルを作成し、ヘッダーの記述をスッキリさせました。これはやらなくても良い作業なのですが、ごちゃごちゃするのが嫌いな人にはオススメです。

管理人は、新しく作るphpファイルにjsの読み込みも含ませてしまっています。

<!-- 飛び出すサイドバーここから -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.sidr.min.js"></script>

<div class="menu_sidr"><a class="right-menu" href="#right-menu"></a></div>
  
<div id="sidr-right">
  <!-- Your content -->
  <ul>
        <?php wp_list_pages('title_li=<h2>' . __('ここに好きなタイトルを入力') . '</h2>' ); ?>  
	<li><a href="ここにブログ一覧ページのURLを記述" title="最近の投稿を見る">最近の投稿を見る</a></li>
	<li><a class="right-menu">←戻る</a></li>
  </ul>
</div>
  
<script>
$(document).ready(function() {
    $('.right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>


<!-- 飛び出すサイドバーここまで -->

これを全てテキストエディタに記述し、任意の名前を付けて保存、テーマフォルダにアップロードします。例えば「sidr-yobidashi.php」という名前を付けた場合、

<?php get_template_part('sidr-yobidashi'); ?>

というタグを「サイドバーを飛び出させる起点となるボタンを設置したい場所」に記述することで、sidr.phpを呼び出し、起点ボタンを設置することができます。

1行で済みますし、この方がスッキリして良いと思いませんか？

画像を準備する

サイドバーを飛び出させる起点となるボタンは、テキストではなく画像の方が良いと管理人は思います。

特にスマホで閲覧する場合、テキストより画像の方がタップしやすいですし、見やすいと思います。

画像は何でも良いのですが、管理人はマウスオーバーしたとき（マウスのカーソルが画像に合わせられた時やタップされたとき）に画像が切り替わる方が好きなので、こんな画像を用意してみました。

上が通常、下がマウスオーバー時のモノです。画像はGIMPで作りました。GIMPなら、もっと凝った画像も幾らでも作ることができます（無料）。

このように、1つの画像で通常時とマウスオーバー時の両方の画像をくっつけて、切り替えるということもできます。cssで調整すればすぐに実装できます。

また、同じ大きさで別の画像を用意して、マウスオーバー時に切り替えるという方法もあります。

管理人はマウスオーバー時のアクションについては、下記のブログに大変お世話になっております。様々なアクションの方法を丁寧に記述してくれていますので、参考になると思います。

→簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

CSSで調整する

さて、画像を作ってアップしたら、cssで調整しましょう。

上記の画像の場合、管理人は下記のようにcssに記述しました。ちなみに画像のファイル名は「btn_sidr.png」です。

/* 飛び出すサイドバーメニューボタン */
.menu_sidr {
	float: right;
}

.menu_sidr a {
position: relative;
right: 5px;
display: block;
width: 60px;
height: 34px;
background: url(images/btn_sidr.png) no-repeat 0 0;
float: right;
}


.menu_sidr a:hover {
    background-position: 0 bottom;
}

widthやmarginなどをいじれば、サイトに馴染んでくれます。ちなみに、heightは画像の高さのちょうど半分の数値を指定します。

Safariでうまく動かない場合は

ChromeやFirefoxでは動くのに、iPhoneやSafariでうまく動かない、という場合は、jQuery.jsのバージョンに問題があるのかもしれません。（IEでは動作確認してませんw）

管理人は、最初jQuery.js v2.0.2というバージョンでやってみましたが、Safariだけうまく動きませんでした。

そこで、jQuery.js v1.10.1というバージョンのものに切り替えた場合、正常に動作するようになりました。

iPhoneでうまく動かない場合、jQuery.jsに問題があるのかもしれませんね。

そもそもjQueryがうまく動かない場合は

管理人は、未だにjQueryには苦戦しっぱなしです。そもそも基本が分かっていないと言われればそれまでですが、同じようなことで悩んでいる人の力になれればと思い、考えられる問題点を列挙しておきたいと思います。

読み込む場所が違う
パスが違う
コンフリクトしている
その都度jQuery.jsを読み込んでいない
WordPressのプラグインとの相性が悪い

などが考えられます。これらを丁寧に調査し、確認していくことで、jQueryは正常に動作するでしょう。

もの言わぬ難敵、jQuery。しかしその動作は美しく華麗。これからも苦戦しながら、頑張ってマスターしていきたいと思います。

ゼロから始めて毎月10万円稼げるようになるところまでを徹底サポート致します。