レスポンシブページ 作成のための基礎知識


概要

ToolsetBootstrap テーマは,レスポンシブデザインに 対応しています.WordPressの エディターに 表示されている ボタンから,ページや 投稿記事に 直接 Bootstrapのグリッドを 挿入できます。コンテンツは,スマートフォン,タブレット,デスクトップ といった 閲覧者のデバイスに 合わせて 最適化されます.

レスポンシブページ の画面仕様

訪問者が 使っている デバイスの画面サイズを 予めチェックすることは 出来ません.Bootstrap ではMedia Queries(メディアクエリ)によって,デバイスのスクリーンサイズに 適応したCSSを 使用します。

Bootstrapの レスポンシブレイアウトについて 詳しく知りたい方は,Bootstrap公式ページのドキュメントを参照して下さい.

 

画像や動画のレスポンシブ対応

通常,画像や 動画を サイトに 追加する際,固定の値で 幅や 高さを 指定しますが,レスポンシブレイアウトに 適した方法では ありません.ToolsetBootstrap テーマでは,デバイスのサイズに 合わせて 列の幅Column Width)が変化し,画像や 動画が 変化したグリッドに 収まるよう 調整されます.

 

画像のレスポンシブ

メインのBootstrapのCSSにおける img要素の設定は,max-width:100%です.これは 画像が 配置された コンテナ内に 収まるように 拡大・縮小出来るように するためです。

公式サイトユーザーガイドより引用

例えば上の例では,Bootstrap上の 4列のグリッド内に 配置されたイメージは,オリジナル画像のサイズに 手を加えることなく,表示されるデバイスに 自動で 適応しています.大きなサイズの画像であっても 自動的に 表示サイズが 調整されますが,これには問題があり,ブラウザでは サイズが 変更された画像を 表示する前に,バックグラウンドで 完全なイメージが ダウンロードされるため,本当に大きな画像を 使用している場合,ダウンロードに 時間が かかり,最悪の場合,画像が 表示される前に サイトから 訪問者が 去ってしまう おそれが あります。

Toolsetの製品群には,この問題を 回避する 簡単な方法があります.Typesプラグイン または CREDプラグインに 組み込まれている 「イメージリサイズ」 の機能を 使用すれば,画像追加時に 自動的に サイズが 変更されます.画像の最大サイズは WordPressの 「設定>メディア設定」 に 移動して 設定します.

上の例では,最も大きなディスプレイで 表示しても,span4(4カラム)のコンテナの最大幅は 370pxです.メディア設定で 画像の最大サイズを 370pxに 設定しておけば,Typesプラグイン または CREDプラグインを 使用して 画像を アップロードした時に,自動的に リサイズされた画像が 生成されます.

 

動画のレスポンシブ

WordPressは,ページや 投稿記事に 動画へのリンクを 貼り付けるだけで,自動で 動画を 埋め込んでくれますが,そのままでは レスポンシブレイアウトのページ幅に 合わせて 動画の幅を 自動的に 変更してくれません.動画がHTML5の <video></video>タグを 使っている場合は,CSSで 次のように 簡単に 対応できます.

YouTubeや Vimeoなどの 人気のあるソースからの ビデオを 埋め込む場合,組込コードは, <iframe>になります.他のソースの場合は,動画を 表示するために <embed>または <object>タグを 生成できます.レスポンシブに 対応させるには,多少 HTMLと CSSを 追加します.具体的には, <div class=video></div>で,動画の各要素 (YouTubeの場合は,動画のURLではなく, 「埋め込みコード」 )を 囲んで HTMLを 記述し,次のCSSを 追加します。

HTMLの記述例