サイトに手を入れる

このサイト「弐条海月の とはずがたり」に手を入れております。取り組んでいるのはWordPressのテーマ作成。現在のテーマをベースに、CSSによってスマートフォン、タブレット、パソコンで表示を最適化する「レスポンシブ・レイアウト」を取り入れます。ということでHTML5とCSS3で書き直すとともに、テーマを構成するphpファイルも最小構成でいきます。ようするに1から新規で作り直すよーということなのですが…。

最近のサイト作成の手順としては「モバイル・ファースト」という考え方があります。既存のサイトをスマートフォンやタブレットに最適化するよりも、新規で作る場合はスマートフォンのサイトを作り、それをタブレットやパソコン用に最適化するほうが考え方も手順もシンプルでよい…というものです。

最初は旧テーマを編集する形で取り組んでいたのだけれど…かえって面倒なことに気づき、ゼロからテーマを作っていくことにしたのです。

私もその考え方にのっとり、html5でサイトの骨組みを作成。ゼロから…と言いながらサイドバーあたりは旧サイトからの流用なのでまだ書き直してはおりませんが、文書構造にはこだわるつもりです。IE6、7など古いブラウザには対応しない予定なので、CSSがなくとも文書構造さえ正しければそれなりに表示されると思うからです。

今回のテーマは、METAタグに「」を記述して、デバイスのスクリーンに合わせて拡大表示するように最適化しています。あとはCSSで画面の横幅をもとに振り分けて、スマートフォンでは1カラム、タブレットでは2カラム、パソコンでは3カラムで表示するレイアウトです。

おおまかな文書構造は…サイトのタイトルなどヘッダー部分、日記を表示するメインコンテンツ、左
サイドバー、右サイドバー、フッターの順です。とりあえず手持ちのiPhone 4Sで確認しつつ、スマートフォン用の1カラムのレイアウトを考えていくのです。とは言っても並べるだけですが（笑）。

そうそう。iPhone 4Sは解像度が640px×960pxなのだけれど、スマートフォン用のサイトとしては320px×640pxで考えたほうが効率がよいです。私のサイトの場合は、ロゴ画像の横幅が100pxちょっとありまして、その横にサイトのタイトルを表示するときにちょうどよい文字の大きさを選択して記述すると…良い感じになりました。それが320pxかな。

これを基準に1カラムのレイアウトが完成しました。もちろん、パソコン上でもSafariとFirefoxのウィンドウをぎゅっと狭くしてスマートフォンでの見え方をチェックしました。iPhoneでの表示と差異がほとんどないので、1カラムのレイアウトは完成とします。先述の通り、修飾などはあとからです。

タブレット用の2カラム、パソコン用の3カラムのレイアウトがまだ完成していないのは仕様です（笑）。だからそれらでこのサイトをみると、それはもう見事なまでに表示が崩れていると思います（笑）。頑張ってテーマの完成を急ぐので、それまでは見苦しいままでお付き合いくださいませ。