WordPressにBootstrapを導入したい!

4月にデザインを変更したけれど、メニューバーだけは以前のままでした。スマートフォンでは右上に「ちびメニュー」が表示され、クリックするとメニューが伸びてくる仕組みになっていました。

新しいスマートフォン表示

これを、ちびメニューを廃止して、表示できない部分はスクロールして表示させる仕組みに変更したいと思っていました。

雑誌「Web Designing」に、参考になるページがあったので、これを真似したいと思っていました。ところが、

タブ部分を配置し横スクロールに対応させる

それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さらに、タブの切り替時えにアニメーションをつけて、変化をわかりやすくしてみよう。

使用するフレームワークとプラグイン

今回は、jQueryのほかに「Bootstrap※1」というフレームワークと、「Hammer.js※2」というタッチジェスチャーに特化したJavaScriptライブラリを使用する。この二つを組み合わせることによって、上記で述べたような操作に対応したタブメニューを実装できる。

カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」

そもそもBootstrapって何? 読者の間では常識という体裁で語られていますけど…
これがないとスワイプ対応メニューを作ることができないんですか?

ならば、Bootstrapについて勉強してみようじゃないかと。例によって「Schoo」というe-ラーニング教材と本:「Bootstrapファーストガイド(相澤裕介 著)」でいろいろと勉強しました。

BootstrapはCSS設計の煩わしさから解放され、簡単にモバイルフレンドリーなサイトが構築できる

Bootstrapの特長としては以下のことが挙げられます。

  1. HTMLモジュールを組み合わせることにより、メニューやボタン、ナビゲーションやカルーセルなどの部品をCSSを書くことなく配置できる。
  2. メディアオブジェクト、メディアリストなど、画像とテキストを組み合わせたリストが作成できる
  3. グリッドデザインにより、横幅をコントロールできる。
  4. しかも画面の大きさが変わった時のレイアウトをdiv要素に適用したclassでコントロールできるため、レスポンシブデザインが簡単に実現できる。
  5. カルーセルやツールチップ、アコーディオン、モーダルダイアログなど、javascript(jQuery)のプログラミングなしで配置できる。
  6. 体裁の良いフォームを、テーブル要素なしでレイアウトすることができる

CSSを記載しなくても体裁の良いサイトが作れるため、開発スピードを上げることができますし、オリジナルのCSSの分量を減らすことができます。ちなみに前バージョンの本サイトのCSSは1600行に対し、現バージョンはわずか650行です。

例えばこんなこともできます

モーダルダイアログ

<button class="btn btn-primary" data-toggle="modal" data-target="#flat35">ここをクリックしてください</button>
<div class="modal fade" id="flat35">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span area-hidden="true">×</span><span class="sr-only">閉じる</span>
</button>
<h4 class="modal-title"><small>安心で選ぶ全期間固定金利の</small>フラット35</h4>
</div>
<div class="modal-body">
今月のフラット35は、<br><b>史上最低金利<span class="text-danger">年0.66%</span></b>です。<br>
(基準金利:フラット35S 金利Aプラン、ご返済期間15〜20年の場合)<br><br>
日銀の金利政策を受け、住宅ローンは今がチャンス!
</div>
<div class="modal-footer">
<p>◎◎銀行</p>
<button class="btn btn-primary btn-sm" data-dismiss="modal">閉じる</button>
</div>
</div><!-- .modal-content -->
</div><!-- .modal-dialog -->
</div><!-- .modal -->

パネル

【こだわり】

社内は全面ホワイトボードで、いつでもMTG可能!あえてのMTG時間は設けず、業務に集中できるスマートな環境です!

<div class="panel panel-info">
<div class="panel-heading"><h4>【こだわり】</h4></div>
<div class="panel-body">
<p>社内は全面ホワイトボードで、いつでもMTG可能!あえてのMTG時間は設けず、業務に集中できるスマートな環境です!</p>
</div>
<div class="panel-footer text-right">出典:http://www.green-japan.com/job/37953?case=login&lid=src_type01</div>
</div>

アラート

2014.10.09利用規約を更新しました
<div class="alert alert-info alert-dismissible">
<button class="close" data-dismiss="alert" area-hidden="true">×</button><b>2014.10.09</b>
利用規約を更新しました
</div>

ちなみに、このサイト全体もベースのデザインはBootstrapによるもので、それらしき要素の部品を見つけることができます。

BootstrapとWordPressによるタッグにより、工期の短縮を目指す

とにかくWordPressサイトの作成には時間がかかります。Bootstrapを組み合わせれば、骨格となるモックアップが素早く作れます。カラム落ちのトラブルとCSSスクリプトとのにらめっこが減ります。また、そこそこ見栄えの良いボタンなどのモジュールをCSSを意識することなく配置できるのは大きいです。

それでも、このサイトを再構築するのに大型連休を5日間まるまる使ってしまいました。何が苦労したかはこの後お話しします。


コメント

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません