レスポンシブな感じで quoted を立ち上げました

Responsive Web Designの話を少しずつ目にし始めたので、レスポンシブなのでも作ってみるかということで「quoted」というサイトを立ち上げました。いや、むしろ逆で引用文主体のサイトだからレスポンシブでいいよね、って感じなのですが(笑)。作ったといっても、そのほとんどで自分の力は何一つ使ってません。

skelton-001

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

Responsive Web Design の簡単な説明

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

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

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

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

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

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

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

skelton-002

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

skelton-003

「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を使ってレスポンシブ・ウェブ・デザインで何か…と、お考えの皆さんの参考になればと幸いです。

Tags: , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE