前回からの続き。今はせっせとhtmlとCSSの基礎を記憶の奥底から引っ張り出している最中ですが、ちゃんと正しく理解出来てないなあ〜と自覚しつつも、WordPressもバージョン3.9となり、全く最新状況にキャッチアップ出来ていないのですから、早くサンプルを作ってWordPressの記憶の発掘に取りかからなければ！と思いつつ、今どきこんな質素で時代遅れなブログ日記に何を時間かけているのでしょうか…全く。
　そんなワケで、誤用や文法ミスは多々あろうが、まずはモックアップをザックリ作っちゃおうと。ちなみにタイトルにある「ザックリ」と「詰める」というのは対義語ではなかろうか…？なんてことに引っ掛かりつつ、仕上げたiPod touch縦置きポートレイト用の試作品はコチラ（注：通常のMacからアクセスしても崩れて表示されます）！

Night Head（iPod touch縦置き用）

以降、完全備忘録

　さて、ここから以降数回に渡り、htmlとCSSのおおよその構成が出来上がるまでは、完全に自分の為だけの備忘録と化します。超初心者状態に先祖返りしているので「今さらそんな中学生でも知ってるようなことを…」というレベルのものも、自分用にメモっていきます。だっていつも忘れてしまい、こういう時に困るのですよ。当ブログを作り始めた時に、ちゃんと工程をメモっておけばよかったと反省しているのです。

●ヘッダー＆ナビの下にあるタイトルは＜h1＞。基本的に曲名のタイトルだが、カテゴリの名称を兼ねる。ブログ日記では「曲ごとに」カテゴリ扱いを現時点では予定。
●ここは＜h5＞曲タイトルと進捗状況を合わせて表示してはどうか。例えば「第１４回目の作業」など。
●記事タイトル＜h2＞。
●記事投稿日＜h6＞。

　＊記事タイトル周りのh2、h5、h6にはプロパティ line-height : 1; でリセットしておき、そこから「margin-top」で上下間隔の調整。当サイトでは基本的に「bottom」で間隔調整はしないという自分ルール。

　＊ 記事中に使用する画像は横幅100％で使用。配置時には　width=”800″ height=”533″　などサイズの情報は入れない。ひとまずこの状態をiPod touch用として、大きな解像度のディスプレイ用には別途CSSへ追記。

iPad縦置きポートレイト用のCSS追加

　次は、上で作成したiPod touch用の素材をもとに、iPadのポートレイト表示用のCSSを作成。コチラの記事を参考に、iPad縦置き用のメディアクエリーは下記のようにしてみました。768ピクセル〜1023ピクセルのガジェットはコレを適用。

@media only screen and (min-device-width: 768px)
    and (max-device-width: 1023px){

ここに専用CSS追記

}

　加えて、iPod touchの縦置き用（320ピクセル〜767ピクセルのガジェット）メディアクエリーには丸形キャッチアイコン（id=”ICON”）の非表示指定「display:none;」を追記。

@media only screen and (min-device-width: 320px)
		and (max-device-width: 767px){
 #post img#ICON {
	display:none;
}
}

　以上を踏まえ、仕上げたひな形はコチラ（注：通常のMacからアクセスしても、まだ崩れて表示されます）！

Night Head（iPad縦置き用）

●記事タイトルの横に、丸型のキャッチアイコンを追加。
●記事本文の＜p＞タグはあえてセンターから右側へずらしてみる。これはKINFOLKの真似で、個人的に中央に配置しているより読みやすいと感じたのが新鮮だったから。しかし横置きならまだしも、ポートレイト表示で効果があるのかどうかは不明。
●記事中の画像は横幅１００％だと大き過ぎるので、適度なサイズ（％指定）にしておき、様子を見て適宜変更してみる。しかしここで早くも「Retina対応でないと画像がぼやけて残念」という例のアレが。特に丸形キャッチの方は円形だけに境界線の粗が余計に目立つ。Retinaへの対応にはどういう手法があるのか後日調べてみます。

　タイポグラフィの諸設定については下記サイトを参考にしました。しかしいつも思うのですが、文字の世界は本当に深くて、正直なところもう正しい使い方を追うのは諦めています。次回はiPad横置き（ランドスケープ）の場合の表示をザックリ詰めてみる予定。つづく。

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