今回は記事本文周りのレイアウト調整。前回、何となく記事番号の設定が出来たので、動作確認も兼ねて「Night Headカテゴリー」で記事を１本追加します。
　まずサンプルとして昔のRSP-550の電池交換記事から本文テキストの一部と、基盤の写真を配置します。
　ところで、通常の写真画像のRetina対応ですが、早く各ブラウザ共通の仕様が決まってくれれば嬉しいのになと思ったり。左図の写真は横幅470pxの等倍サイズで容量は46KBですが、本文エリア内いっぱいの大きな画像は横幅800pxで95KB（↓）になります。MacBook AirのSafari上でピンチアウトすると、当たり前だけどすぐにぼやけます。

　そしてコチラ（↓）は倍の横幅1600pxサイズのものを縮小表示させた場合。しかし容量は268KBと、２倍以上になっています。MacBook AirはRetinaディスプレイではないけれど、こちらの画像であればピンチアウトして拡大しても細かい文字などが読み取れますね。実際にRetinaディスプレイだとどう見えているのか知りたいです。

WordPress 3.9.1 での画像の取扱い方

　引っ越し先の制作日記ブログでは基本的に１カラムなので（当サイトもですけど）、画像はドン！と中央揃えで配置することにして、当ブログの先頭のような小さいサイズの画像に文字を回り込ませるレイアウトは廃止する予定。

　では、先日のアイキャッチ画像記事でも体験済みですが、ローカルMAMP上のWordPressに画像をアップロードしてみます。投稿記事編集画面から、メディアの追加ボタンを押してみる。

　まだどのような挙動を見せるのか分からないので、ひとまず原寸のまま中央配置でアップロード。

　そこでMacBook Airローカル内の「wp-content＞uploads」フォルダを覗いて見ると、何とそこにはオリジナルの画像以外に、自動で３つの異なる画像サイズのファイルが作成されているではないか。それはイヤ。

　そこでしばし考えてみて、ダッシュボードの「設定＞メディア」にある項目全てに「０」を入力。改めて別ファイルでアップロードのテストをしてみると、オリジナル以外の余分なファイルは作成されなくなりました。
　アイキャッチ画像もオリジナルの200pxのみアップロードされます。

本文エリア内での画像レイアウト、自分ルール

　投稿記事本文エリア内にアップロードした画像をどのように配置するか考えてみました。以前設定してみた構造図内の＜p＞で囲われた部分に記事テキストと画像が入ることになるのだけれど、基本的に画像は次の３つのサイズを想定します。

　１．＜p＞エリアの横幅同値800pxの最大画像。
　２．＜p＞エリア内の、テキストエリア幅同値640pxの画像。
　３．テキストエリア幅640px未満のスモールサイズ画像一般。

　それぞれのサイズの画像を、記事エリアに配置する際のちょっとした注意をメモしておきます＞自分。

１．＜p＞エリアの横幅同値800pxの最大画像。

　最大幅800pxの画像（なんちゃってRetina対応策をとる場合は1600px）をアップロードする場合、配置は「左」に指定する事。CSSの方で＜p＞エリアの横幅一杯になるよう調整しておきます。

２．＜p＞エリア内の、テキストエリア幅同値640pxの画像。

　レイアウト上、最大幅640pxに抑えたい画像（あるいは実サイズが、640px以上800px未満の場合とか）をアップロードする場合、配置は「中央」に指定し、width=”640px”を直接打ち込んでおく事。CSSの方でもクラス「.aligncenter」で調整。

３．テキストエリア内の、横640px未満のスモールサイズ画像一般。

　横幅が640pxに満たない画像（昔の写真や、ネットで拾ってきた参考画像など）をアップロードする場合、配置は「中央」に指定し、さらに記事編集画面上で、手入力にてセンター指定（　＜p style=”text-align: center;”＞画像＜/p＞　）しておく事。

CSSの設定

　上記の写真レイアウトのためのCSSメモ。もちろんテキトーで、文法的に間違っているかもしれないのでご注意下さい。また今後の成り行きで変更の可能性アリ。YouTubeやvimeoなどの動画をインフレームで配置する場合や、その他オーディオなどのマルチメディア素材の配置については追々考えるとします。つづく。

#post p {
	font-family: "Hiragino kaku Gothic Pro", "Lucida Grande";
	font-size: 14px;
	/* width: 700px;　　←幅指定は中止*/
	margin: 40px 0px 0px auto;
	padding: 0px 40px 0px 120px;
	background-color: white;
	font-weight: normal;
	letter-spacing: 2.2px;
	line-height : 2;
	color: black;
	word-break: normal;
}

#post p img {　　　　　　/* ←最大800px画像用*/
	max-width: 800px;
	height: auto;
	margin: 0px 0px 0px -120px;　　/* ←-120px戻してエリア内に合わせる*/
}

#post p img.aligncenter {　　/* ←640px未満画像用*/
	max-width: 640px;
	height: auto;
	margin: 0px auto 0px auto;
}

次回は本文テキスト周りについてサラッとメモっておく予定。

2014-06-17 ＞ VPS＆WordPress引っ越しメモ