カテゴリー別アーカイブ: ブログ

あらゆる端末に対応するWeb手法

PC、スマホ、タブレットに対応するサイトは増えてきた。
今迄はPC用、スマホ用などに個別でページを作るのが主流だった。

端末毎に異なる表示サイズを考慮しつつ複数の類似したページを作ることに多大な労力が掛かった。

単一のHTMLで作れたら制作時は大変でも後が楽なのに・・・
と思っていたら「レスポンシブWebデザイン」という手法でワンソース・マルチデバイスを実現できるそうだ。

WordPressでは、プラグインを利用してスマホ用のページを自動変換して貰えたが、プラグインを追加するだけの手軽さだったが制限も多かった。

色々調べてみると先駆者たちが頑張ってくれていたので参考にしてみることを開始しました。
スマホで表示したサンプル

ナビメニューはテキストなので幅の差によって折り返しされるが、スマホで表示するとこんな感じで表示されています。

PCのブラウザでの表示

PCのブラウザでは右側のサイドバーも表示されているが、ブラウザの幅を縮小していくと本文の下に回り込んで表示される。

右側のサイドバーが本文の下に表示

これならばブラウザの横幅で表現は変わるが概ねどんな端末で見ても同じようになる。

プラグインでは表示されなかった「カスタム投稿」ページや「外部」としてメニューに配置したリンクも表示された。

もう少し色々と試したり研究が必要そうだがWordpressの機能が全て反映してくれるといいな。

(このテスト段階では疑似サーバで実行しているのでスマホの画像がスクリーンショットではありません。)

スマホもtwitterも携帯も対応完了か

いろいろなテストを繰り返しているwordpress(このブログ)がまたバージョンアップして3.2.1になっていた。
早速バージョンアップを実行したら、デフォルトのテーマが「twenty Ten」から「Tweny Eleven」に換わっていた。

この「Tweny Eleven」の仕組みを調べつつ、このブログで試行錯誤を開始した。 続きを読む