*

【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

 

BootstrapでWordPressサイトをレスポンシブデザイン化

先日Googleから「4/21以降、サイトのスマホ対応有無を検索結果の順位に反映する」旨のアナウンスがありました。

Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

かいつまんで言うと「(スマホで検索する人には)スマホ対応サイトを優先的に上位表示するよ」ということですね。

そしてこれを機に、自サイトをレスポンシブ・デザイン化しようかなと検討されている方も多いのではないでしょうか?

そこで今回は「WordPressで作ったサイトをレスポンシブデザイン化する方法」をご紹介します。

極力やることを絞ってシンプルにまとめましたので、これからWordPressサイトをレスポンシブデザイン化しようとしている方は参考にしてみてください。

 

前提

今回ご紹介するレスポンシブデザイン化とは、”スマホ・PCそれぞれの画面サイズに応じて動的にレイアウトを変えるもの”を指します。あくまでレイアウトを最適化するという点だけで、スマホ用の画像を個別に用意する等までは含みません。つまり単純に「リキッドデザイン化する」ということです。

TwitterBootstrap(Bootstrap3)

リキッドデザイン用のCSSをイチから作るのは手間なので、TwitterBootstrap(Bootstrap3)を使用します。これをWordPressに組み込むことでレスポンシブ・デザイン化を実現します。

Bootstrapを知らない方は以下に目を通してどんなものか見てみてください。
※Bootstrapの使い方についても解説がありますが、ここではそこまで理解しなくても大丈夫です。

今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜 | Find Job ! Startup

 

jQuery

Bootstrapを使うにはjQueryのバージョン1.X系(1.9以上)が必要になります。

最新バージョンのWordPressを使っていればバージョン1.9以上のjQueryが読み込まれているかと思いますが、念のためブラウザ上で右クリック→ソースコードを見るなどしてバージョンを確認しておいてください。

 

今回レスポンシブデザイン化するWordPressサイト

今回の説明用にWordPressのデモサイトを用意します。
#既存サイトについてレスポンシブデザイン化のテストをしたい場合はローカルにWordPressサイトを作って試してみてもいいでしょう。

テーマはなんでも構わないのですが、シンプルなものの方がわかりやすいので「BlankSlate」テーマにしました。

レスポンシブデザインを適用する前の見た目は以下のとおりです↓

レスポンシブデザインを適用する前の画面

サイト名「レスポンシブデザイン」とだけ設定しただけの状態です。

これからBootstrapを使ってこのサイトをレスポンシブデザイン化していきます。

 

それではいきましょう。

 

作業の流れ

WordPressにBootstrapを組み込む流れは以下のとおりです。

  1. WordPressにBootstrapを読み込ませる

  2. WordPressのテンプレート(PHPファイル)を編集 – マークアップ

順番に見ていきましょう。

 

1. WordPressにBootstrapを読み込ませる

(1)Bootstrapをダウンロード

はじめにBootstrapの本体をダウンロードします。

Bootstrapの公式サイトにアクセスし、画面中央の「Download Bootstrap」をクリックしてダウンロード用のページへ移動します。

複数のダウンロードボタンがありますが、一番左の「Bootstrap」の「Donwload Bootstrap」ボタンをクリックしてください。

Bootstrapのダウンロード画面

圧縮ファイル(bootstrap-3.3.2-dist.zip)を適当な場所にダウンロードし、ファイルを解凍します。

 

(2)WordPressのテーマ内にファイルを配置

(1)の圧縮ファイルを解凍すると「bootstrap-3.3.2-dist」というフォルダが現れます。この中にBootstrapのcssやjsなどのファイルが一式入っているわけですね。これをWordPressテーマの中に配置します。

今回はテーマフォルダ直下に「lib」フォルダを作ってその中に解凍フォルダを丸ごと入れてしまいます。

WordPressテーマ内にBootstrapのファイルを配置

 

(3)Bootstrapのファイルを読み込む

次に(2)で配置したフォルダのcssとjsをWordPressで読み込みます。

functions.phpをテキストエディタで開いて以下を追加してください。

これでWordPressのテーマにBootstrapのファイルが読み込まれます。

 

ここで一度ブラウザでサイトを表示してみてください。

Bootstrapの読み込みがうまくいっていれば、サイトのデザインが以下のように変わります。

Bootsrapが適用された画面

フォントやリンクなどがキレイになっていますね。これはBootstrapのスタイルが効いているためです。このようにデザイン部分を良きに計らえで調整してくれるのもBootstrapの良いところです。

Bootstrapが読み込まれていることを確認できたところで次へ進みましょう。

 

2. WordPressのテンプレート(PHPファイル)を編集

(1)DOCTYPEをHTML5用に合わせる

header.phpの一行目を見てDOCTYPEを確認します。

この部分が

<!DOCTYPE html>

となっているようにしてください。

 

(2)viewportを変更

header.phpの以下部分を書き換えます。

変更前:<meta name=”viewport” content=”width=device-width” />
変更後:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

viewportについての解説は以下をご覧ください。

ビューポートを設定する – PageSpeed Insights — Google Developers

 

(3)HTML(PHP)にclassを追加 – マークアップ

Bootstrapを組み込んだサイトでは、HTMLタグに特定のクラス名を追加することで

  • PCで表示したときは2列で表示
  • スマホで表示したときは1列で表示

のようにレイアウトを調節することができます。

これが冒頭でも触れた「リキッドデザイン」で、今回のレスポンシブ・デザインの要になります。

 

ここでちょっと寄り道。

Bootstrapでは画面上の横幅を12個のブロックに分ける、という考え方をします。(グリッドデザイン ※1)

グリッドデザインのイメージ

Bootstrapのグリッドデザイン

Bootstrap公式ページ(英語)より

 

画面上の各要素が「12個のうちいくつ分のスペースを取るか?」を指定することで横幅を調節する、というお話です。

※1)グリッドデザインについては以下のサイトでわかりやすく解説されています。

マルチデバイス対応に適した「可変グリッドレイアウト」

 

このBootstrapのレイアウトの考え方を踏まえた上で本題に戻ります。

 

さて、今回は以下の画像中の赤枠で囲んだ部分を

  • PCでは左右に並べて表示
  • スマホでは上下に表示

となるレスポンシブデザインにしましょう。

レスポンシブデザイン化する部分

 

やろうとしていることがイメージできましたか?

次からいよいよファイルを編集していきます。

 

まずはページ全体をcontainerクラスで囲みます。

さらに左右の要素の入れ物となるdivにrowクラスを追加します。

ヘッダーファイルにcontainerクラスとrowクラスを追加

ここでは既存のタグにクラスを追加していますが、divを新たに追加して

<div class=”container”></div>

<div class=”row”></div>

で既存の要素を囲っても構いません。
#本来はそうすべきかもしれませんがここではこのまま進めます。

 

次に左側(index.php)・右側(sidebar.php)それぞれに横幅を指定するクラスを追加します。

以下のように「col-sm-数字」で横幅を指定してください。

 

左側(index.php)

index.phpにクラスを追加

右側(sidebar.php)

sidebar.phpにクラスを追加

col-sm- の部分は「768px(タブレット端末の画面横幅)以上ならこのサイズにするよ〜」という意味です。(smは”Small devices Tablets”のこと)

「col-sm-(768px以上)」の他に「col-xs-(768px未満)」「col-md-(992px以上)」「col-lg-(1200px以上)」があり、それぞれを組み合わせて使うこともできます。

「col-sm-数字」の数字の部分は1〜12のいずれかを入れてください。今回は左右2:1の比率にしたかったので、左側を8、右側を4としました。

Bootstrapのグリッド幅指定(英語)

 

さっそくブラウザで表示を確認しましょう。

レスポンシブデザインで要素を左右に並べた画面

 

意図したとおり左右横並びになりました。

ブラウザの幅を狭めていくと・・・

スマホでの見え方

縦一列に並び変わりました。

画面のサイズ(幅)によって左右に並んだり縦一列になったり、ちゃんと切り替わっていますね!

 

今回つくったデモサイトはこちらです。

ブラウザの横幅を変えてみて、表示が切り替わる様子を見てみてください。

 

○Chromeブラウザを使っている方向け

レスポンシブデザインの表示をチェックするときは以下のChromeアプリが便利ですよ。無料ですし、一度試してみてください。

Responsive Web Design Tester

 

3. IE対応

いろいろな端末のさまざまな画面サイズに合わせて表示を変えられる便利なレスポンシブデザインですが、残念ながらIE8以下のブラウザは未対応です。

  • 古いバージョンのIEではHTML5のタグ(asideタグなど)を適切に扱えない
  • 横幅毎に表示(スタイル)を変えるのに必要なCSSのメディアクエリー機能が効かない

といったことが原因で、旧版IEではレスポンシブデザインを適用したサイトを正しく表示できません。

とはいえIEユーザーを切り捨てられない、完璧でなくてもよいので最低限の対応はしておきたいというケースもあるかと思います。そのようなときは以下のスクリプトの力を借りましょう。

  1. html5shiv.js ・・・ 古いIEでもHTML5のタグを認識できるようにするスクリプト
  2. Respond.js ・・・ IE8でもmax-width/min-widthが効くようにしてくれるスクリプト

この2つを読み込むことで、古いIEにも対応したスポンシブデザインサイトにすることができます。

以下をheader.phpにコピペで貼り付けてください。

Bootstrap公式ページ(英語)より

 

respondjsとhtml5shivの読み込み

外部サイトにホスティングされているjsスクリプトを自サイトに読み込んでいるわけですね。

これで”一応”はIE8等の古いインターネットエクスプローラーでもレスポンシブデザインが効くようになります。ただし完璧ではないので、場合によってはブラウザの幅を変えてもデザインが切り替わらないこともあるかと思います。html5shiv.jsとrespond.jsは「無いよりマシ」程度に考えておいた方が無難です。

 

Bootstrapの注意点

便利なBootstrapですが、既存サイトに組み込む際には以下にご注意ください。

クラス名の衝突

Boostrapは特定のクラス名に対してスタイルが効く仕組みです。例えばボタンに「btn btn-default」のようなクラス名が付いていると、Bootstrapデザインのボタンになります。既存サイトのデザインを変えたくない場合、「たまたまクラス名が同じだったことによりBootstrapのスタイルが適用された」となっているところがないか気を付けましょう。

読み込みファイルサイズの増大

Bootstrapを読み込む分、サイトのファイルサイズが大きくなります。大抵の場合は問題になることはないかと思いますが…少しでも高速な表示が必要な場合など、シビアな条件を求められるサイトの場合にはBootstrapを使ってよいのか注意が必要です。

 

参考サイトのご紹介

WordPressとBootstrapを組み合わせをやってみるときに参考となるサイトをいくつかご紹介します。

 

なぜBootstrapを使うのかから具体的な内容までわかりやすく解説されています。

 

http://www.webdesignleaves.com/wp/wordpress/303/

Bootstrap 3 を WordPress で使ってみる

Bootstrapでのナビゲーションバーやパン屑リスト、ページネーションの使い方等々、当ブログ記事より更に詳細な解説記事です。

 

http://cccabinet.jpn.org/bootstrap3/

Bootstrap3移行ガイド

Bootstrapの公式サイトは英語ですが、こちらのサイトでは日本語で解説されています。

 

http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html

HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – @IT

Bootstrapって何?というところから基本的な使い方まで画像付きで丁寧に解説されています。

 

おわりに

ここまでWordPressへBootstrapを導入してレスポンシブデザイン化する方法を説明してきましたが、いかがでしたでしょうか?

Bootstrapを使えば比較的手軽にWordPressをレスポンシブデザイン化(リキッドデザイン化)することができますので、是非うまく活用してみてください。

 

 

PR

関連記事

DashboardNotePadプラグイン

付箋紙のようにメモ書きできる!『Dashboard Notepad』はWordPressのダッシュボードにメモを残せるプラグイン

WordPressで管理画面のダッシュボードにメモを残せるようになるプラグイン『Dashboar

記事を読む

WordCamp2014tokyo

WordCamp2014 Tokyo に行ってきました。

もう一週間ほど経ってしまいましたが、先週末に初めてのWordCamp(WordCamp Toky

記事を読む

Active Preview ボタン

『Active Preview』で編集内容をリアルタイムプレビュー

最近使ってみたWordPressプラグイン『Active Preview』が便利だったのでご紹介しま

記事を読む

HTMLもCSSもまとめて一式ダウンロードできるmacアプリ

URLを指定するだけでWebサイトを丸ごとダウンロードできるMacアプリ『SiteSucker』

Web制作をしていると、特定のサイトをローカルにダウンロードしたいと思うことがありませんか?

記事を読む

WordPressでページ送りができない

次のページが表示されない!WordPressでページ送りができないときの原因と対処方法

先日対応したお客様のWordPress案件で、category.phpに「同カテゴリーに属する情

記事を読む

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」と相談を受けました。 Wor

記事を読む

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりにgitを使っています。 で、

記事を読む

SEOが強いWordPressサイトの内部を知る

【SEO初心者向け】検索順位を確実に上げるためのWordPress×SEO基礎知識

「うちのホームページをネット検索に強くしたい。でもやり方がわからない。」 WordPressで

記事を読む

wordpress_on_mac

【保存版】WordPressのサイトをmacのローカル環境にコピーして動かす方法

WordPerssで作った既に公開中のWebサイトについて、サイトを丸ごとローカル環境に持ってき

記事を読む

brewでmacのOpenSSLをバージョンアップ

macでローカル環境のopensslをバージョンアップする手順 〜 brewで更新→rbenvでrubyを再インストール 〜

先日自社の運営サイトのSSL証明書の更新作業をしたのですが、ローカル環境として使っているmacで

記事を読む

PR

Comment

  1. […] ・get_stylesheet_uri()・・・style.cssのURIを返す関数です。Bootstrapの読み込みに関してはコチラの記事がおすすめです。 […]

  2. momotarok0610 より:

    貴重な情報提供ありがとうございます。
    Webデザイン初心者で、現在WordPressの学習中なのですが、以下の部分をfunction.phpに記述しても、読み込みができませんでした。

    /**

    * Bootstrapのスクリプトとスタイルをエンキュー

    */

    function my_bootstrap_scripts() {

    wp_enqueue_style( ‘bootstrap-css’, get_template_directory_uri() . ‘/lib/bootstrap-3.3.2-dist/css/bootstrap.min.css’);

    wp_enqueue_script( ‘bootstrap-script’, get_template_directory_uri() . ‘/lib/bootstrap-3.3.2-dist/js/bootstrap.min.js’, array(), ‘1.0.0’, true );

    }

    add_action( ‘wp_enqueue_scripts’, ‘my_bootstrap_scripts’ );

    原因が全く分からないのでなんとも言えないのですが、一度ご確認いただけますでしょうか。
    なお、利用したテーマは、「BlankSlate」bootstrapは「bootstrap-3.3.6」です。
    お手数おかけいたしますが、よろしくお願い致します。

    • yukarien より:

      パスは合っていますか?
      bootstrapのバージョンが3.3.6なら、my_bootstrap_scripts内で指定するパスも /bootstrap-3.3.6/dist/js ・・・ にしないとパスが合いません。

  3. […] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]

  4. […] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]

コメントを残す

PR

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりに

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する
WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」

おすすめGoogle拡張リスト
【保存版】情報収集を快適に!Chromeに入れておきたいオススメ拡張(エクステンション)8個

私はChromeをメインブラウザとして使っていますが、その理由のひとつ

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り

BootstrapでWordPressサイトをレスポンシブデザイン化
【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

  先日Googleから「4/21以降、サイトのスマホ

→もっと見る

  • feedlyでフォロー RSS登録ボタン
  • 株式会社YUKARIでは、ホームページリニューアルをメインにWeb制作事業を行っています。既存サイトへのWordPress導入・レスポンシブデザイン化からSEO強化まで何でもご相談ください。 ホームページリニューアルをお考えの方からのお問い合わせをお待ちしております。
PAGE TOP ↑