ということで、今日はその舞台裏というか、コレがアレでこうなってできているよ、って話をしてみようかと思います。なにかの参考になれば幸いです。

Responsive Web Design の簡単な説明

インターネットに接続できるデバイスが増えています、というか多様化しています。画面サイズや画面解像度はまちまちです。日本の場合は10年ぐらい前からいわゆる携帯電話で接続できてましたが、それらもやはり同じような問題を抱えていました。そのような個別の端末に対して、画面解像度や技術仕様などをベースにコンテンツを最適化して配信するということは大変ことです。

さらに、今時はスマートフォン向けのサイト制作などもあります。今後ますます増えていくであろう端末に対して、情報をどのように出していくか、ということを考えなければいけません。デバイスに完全に最適化するのか、ある程度の見栄えを維持したままワンソースで展開していくか、ってなことです。

ま、そういう手法のひとつがこの「Responsive Web Design」や「Adaptive Web Design」などと呼ばれているものです。厳密に言えば、二つの意味するとこは異なると思いますが、端末の画面サイズや利用可能な技術、仕様にあわせて、最適化というより適合させていくという考えです。

たとえば、カラムのレイアウトは流動的に変化するように「%」ベースで幅を指定する、画像や映像のサイズもそれにあわせて変化させる、といったテクニックを駆使します。そこで使われる技術としては、CSS3はもちろんMediaQueriesやJavaScriptなども含まれます。

ただし、この方法もやはり万能とは言い切れません。たとえば、ブログやニュースのような文字が主体のコンテンツには向いてますが、Webアプリや視覚的な情報も含んだコンテンツなどではコンテンツそのものの見せ方を考えなければならないかもしれません。要は向き不向きがあるってことです。

WordPressのテーマ「Skeleton」を使ってみた

ま、そんなわけで今回作ったサイトは、「書籍や誰かのインタビューなどで気になる発言を引用してメモしておく」という内容です。文字ベースになるのは明白ですし、個別のデバイスに対応する意味もあまり感じられないので、レスポンシブな感じにしてみようと思ったのですね。

そこで採用したのが（自分で作れよって話ですが）、こちらの「Skeleton WordPress Theme」です。Skelton という名前からピンと来る方もいらっしゃる方も多いかもしれませんが、このテーマの元になっているものは「Skelton」というフレームワークです。

「Beautiful Boilerplate for Responsive, Mobile-Friendly Development 」というタイトルになってるように、多様な端末での見栄えをサポートしてくれるフレームワーク。HTML5ベースで主要な要素などがシンプルにスタイリングされたものなので電子書籍などでも使える感じです。これは、カラム幅は % 指定するのではなく、960pxをベースにしたpx指定となっています。

テーマの方はWordPress以外のCMSをサポートしていたりしてるので不要なファイルなども含まれていますが、ファイルをダウンロードしてテーマのディレクトリにアップすれば使えます。いらないCSSのコードもできれば抜いた方が軽くなるでしょう（そのままだと60kぐらいになるので）。

とまぁ、SkeltonがベースのWordPressのテーマをいれて楽はしてるのですが、そのままではちょっと使えないというか、ところどころに凡ミスもあるのでその辺を修正しながら「quoted」ができています。ブラウザのサイズを変えたりiPhoneやiPadなどのデバイスでご覧いただければ、と。

（追記）iPadを縦方向にすると横幅がぴっちりになるのもやはり単純な記述ミスだと思われますが、修正する場合は「skelton.css」の「#Tablet (Portrait)」のcontainerの横幅を748pxに変更しましょう。デフォルトでは左右のマージンが10pxずつ、16カラムがベースなので.sixteenは728px、たとえば「one＋fifteen＝728px」じゃないと話がおかしくなります。

それ以外にやっていること

それと今回は、Web fontも使ってみようかな？と思って「Google Web Fonts」をタイトル部分に使っています。CSS版で入れました。

あと、FacebookのOGPはシンプルに「WP Facebook Open Graph protocol」をベースにちょっとだけ改良。デフォルトイメージの登録、「og:description」には本文先頭の160文字かexcerptを抜いてくれるので楽ですね。

それ以外には、いわゆるサイトパフォーマンス高速化の手法をあれやこれやと。例によって「W3 Total Cache」を入れてCDNのオプションを有効にし、CSSやJS、ちょっとした画像などは別サイトから配信といった感じになっています。

参考までにGTmetrixのデータはこちらです。
→ Latest Performance Report for: http://q.gaspanik.com/

以上、これからWordPressを使ってレスポンシブ・ウェブ・デザインで何か…と、お考えの皆さんの参考になればと幸いです。

ま、そんなことは人の勝手なのでどうでもよいとして（笑）。
前述のBetter Gmailは、Gmailのあの画面をカスタマイズしたスキンなんかも選べるんですけど、久しぶりに設定を見たら素敵なのが増えてました。Better GmailはStylishとかで提供されているものが時折組み込まれるんですよね。

で、最近は素のままでスキンを適用していなかったのですが、今日久しぶりにスキンの項目を見てそこにあった「Gmail Redesigned v2」なるものを適用してみたら、「あら、最初のローディング画面から素敵じゃない！」と思わずおネエ言葉になってしまうぐらいの画面が出てきました。

というわけで、飽きるまではこのスキンに決定でございます。

余談ですが、わたくし通常はThunderbirdやiPhoneでGmailを確認することが多く、仮にブラウザで見る場合はGmailにかぎったことではないですが、CustomizeGoogleのおかげで広告やら自分にとって無駄なものが表示されない仕様になっております。