前回は参考になりそうなサイトを２つ紹介しましたが、もちろんそれ以外にも素晴らしいレイアウトのサイトは星の数ほどあって、自分にそれらを再現出来る技能があればなあ…なんて羨ましく思いつつ、「諦めると楽になる」という一見ネガティブなようで実は高度なポジティブシンキング（勝手にそう思ってるだけ）を駆使し、どんどん諦めてシンプルなブログ日記を目指すのでした。
　そこで引き続きこちらの連載を黙々と読んでいるのですが、まずRWDでは「最小幅のモバイルデバイスからレイアウトを始める」とあります。現在の僕の手持ちの環境ではiPod touchの320ピクセルが最小値。その横幅を実作業を行っているCoda 2で再現するのに、ひとまずCSSでheader（あたま）の横幅を100％から320pxに変更します（↑）。

　連載の第３回の２ページ目に、【ワンポイント】としてブラウザのウィンドウをリサイズするツールが紹介されているのですが、僕は普段SafariをMacBook Airのフルスクリーンで表示させているので、いちいち切り替えたりリロードしたりするのが面倒。またiPod touchの実機を使って確認するのはさらに面倒です。そこでCoda 2のプレビューウィンドウで済まそうと思ったわけなんだけれど、つまり320pxに狭くしたヘッダーに合わせ、ウィンドウのカラムをギリギリまで移動させるというセコい戦法を取ったのでした。試しにiPod touchと並べてみると、無事同じ表示状態が再現されているようです。カラムの幅を移動し終えたら、CSSの方は100％に戻しておきます。ところで他のアプリも同様だろうけど、Coda 2もhtmlファイルやCSSファイルを修正して保存すると、リロードしなくてもプレビューが更新されていくのが何気なくステキ（CSSの一部の要素は、上書き保存しなくてもリアルタイムに自動更新されるみたい）。一手間省かれているだけで快適に感じるものなんですねえ…。

DISQUSの感じが好み

　そこで今回はまず、あまりにラフ過ぎるヘッダーをもう少し作り込んでみようと思い、どこかに参考になりそうなデザインのサイトは無いかしらとしばらく彷徨っていたら、たまたま久し振りにアクセスしてみたDISQUSのサイトをピンチして拡大してみたのがイイ感じで好みなのでした。そうだ、こういう感じにしよう。

では自分とこのヘッダーをいじる

　早速、自分のブログ日記のヘッダー部に載せるメニュー項目を考えてみると、まずロゴ画像（ホームボタン兼ねる）があって、それに管理人についてのアバウトへのリンク。そして制作中の音楽へのリンク…おお、たったの３つしか思い付きませんな。制作中の音楽を「１曲毎にカテゴリとして扱う」とすれば、それに合わせて項目は増えるのかもしれないけれど、そうしたらまたドロップダウンメニューにする等して表示方法を考えねばなりません。まあ、そんな近々降りかかる難題については追々考えるとして、先に進みます。あ、twitterのリンクも置きましょう。計４項目。

　そんな初めてのRWD作業。MacBook Air 11インチの小さな画面を最大限フル活用して組み立てている様子がコチラになります（↑）。ウィンドウを５分割して、左からhtml、CSS、参照用のサンプルCSS、プレビュー、サイドバーになります。狭いです。そろそろApple謹製の外付けRetinaディスプレイ（24インチくらい）が欲しいところ。大体組み上がったとことでサーバにアップロードし、iPod touchで確認してみました。

なんか、微妙にダサい感。

　テキトーに毛が生えた程度のダメダメ感が漂っています。仮ロゴ画像、配色、文字設定などなど要因はたくさん考えられます。たかがヘッダーとは言え、やはりサイトの「顔」ですので、最終的にはもっと真面目にアレコレ試行錯誤する必要がありますな。
　
　ちなみに、現状のファイルをそのままMacBook Airのフルサイズ画面で表示させるとこのようになってしまうのですが（↓）、これをMacBook Airでもちゃんとしたレイアウトに表示されるよう工夫するのが、RWD今後の課題なのですね。つづく。

htmlはともかく、もうほとんどCSSを忘れていて、実はかなり作業に手間取りました…。

2014-05-04 ＞ VPS＆WordPress引っ越しメモ