WordPress

[WordPress] Twitter Bootstrap でモバイルテーマを組んでみたので、いろいろとまとめてみた

本ブログのモバイル版テーマ(iPhone, Android 等で見た時に表示される)を Twitter Bootstrap で実装してみました。

モバイルテーマを新たに実装した理由は、iPhone からこのブログは盛んに見られているからです。

ここ一ヶ月における訪問者数の実に 40% が iPhone からでした(Google Analytics 調べ)。僕は、iPhone で積極的にネットサーフィンすることがないので、このデータに懐疑的なのですが、まあ数字が出ているので、放ったらかしにしていたモバイルテーマも改良していくべきと思って、格好良くしました。

報告だけというのもあれなので、Twitter Boostrap についての簡単な説明とモバイルテーマに使用する時の役立ち情報を書いてみます。

Twitter Bootstrap とは?

Twitter Bootstrap とは、Twitter とは全く関係なくて、Twitter が提供する CSS フレームワークのことです。

簡単に言えば、Twitter から提供されたスタイルシートを丸ぱくりして、タグの class 属性に少し追加するだけで、なんかいい感じの見た目になるのが、Twitter Bootstrap です。

例えば、このブログのモバイル版テーマの「続きを読む »」は、こんな格好良い感じに仕上がっています。

これは、このように記述しているだけです。

<a href="<?php the_permalink(); ?>" class="btn">続きを読む &amp;raquo;</a>

こんな感じで超さっぱりしてます。「class=“btn”」というのを追加するだけで、なかなか素敵デザインに変身します。

どんな感じに素敵になるかというのは、本家 Twitter Bootstrap を見るのが一番早いと思います。

CSS を一度でも触ったことがある人は、かなりぴんと来るのではないでしょうか?

また、Twitter Bootstrap を学習する際は、Twitter Bootstrap (v2.0)の基礎 - ドットインストールだと早くて1時間で、概要を掴めると思います。

WordPress での実装例

WordPress で Twitter Boostrap を使う場合には、Twitter Bootstrap をダウンロード後、ヘッダにスタイルシートの宣言、フッタでの Javascript の宣言を忘れずに行っておけば、Twitter Boostrap を使うことが出来ます。

ちなみに、スタイルの細かい調整をしたい場合は、普段どおりに style.css に書いてけばそちらが優先して適応されるようです。

header.php では、使用する Twitter Bootstrap のスタイルシートを読み込んでいます。後、レスポンシブテーマにしたい時は、bootstrap-responsive.min.css も読み込みます。

<link href="css/bootstrap.min.css" rel="stylesheet">

footer.php に記述している </body> の直前に、Twitter Bootstrap で使用する JavaScript を記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

こちらのサイトを参考にさせて頂きました。

後、モバイルテーマで使える細かいコツ

モバイルテーマの横幅に合わせるには、次のメタ属性を <head> 内に記述します。

<meta name="viewport" content="width=device-width" />

後は、モバイルテーマの横幅で、画像とかフレームが飛び出るので次のようにスタイルシートに記述しとけば、大丈夫になります。

img {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
  height: auto;
}

おわりに

こんな感じで、実に簡単にモバイルテーマを組むことが出来ました。ドットインストールでの学習時間と実装時間を含めて、6時間くらいかな?

ちなみに、Twitter Boostrap は、簡単に恰好良すぎるデザインにすることが出来ますが、そのデザインが似たり寄ったりになるという弊害もあります(笑)。

この記事で Twitter Bootstrap なんか簡単そうで、恰好いいなと思って頂ければ幸いです。