第６２回に引き続き、今回は各投稿記事のタイトルと、本文テキストの文字設定。まず前回までエリア区分が分かり易いように背景色を変えていたのを試作品通りに戻し、枠線は投稿記事全体を示す＜article＞のみ青線を残してそれ以外を撤去（↑）。

　前回紹介した「iVinci」にて作成の図ですが、＜id=”post”＞内の各投稿記事タイトルは＜h2＞、本文テキストはそのまま＜p＞としてそれぞれザックリと装飾。この装飾は今後随時修正します。
　ひとまず＜id=”post”＞を黄緑色の枠線で、本文テキストは赤色の枠線で囲ってみたものがコチラのトップページ（↓）。

　これをぼんやり眺めていて「緑色矢印の箇所にある記事タイトル（今日は金曜日）とその上の記事本文（…独特の感じがあります。）の間隔を空けたい…」と思ったのですが、それを記事タイトル（今日は金曜日）の margin-top で取ったら後々不都合が生じるのでは…？

　これはそもそもindex.phpで「＜post＞の中にループを入れている」というミスではないか。

<article>
	<section id="post">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>　

	</section>
</article>

　たぶん「ループの中に＜post＞を入れる」べきなのではないか。と思ったので、次のように修正。

<article>
	<?php if(have_posts()): while(have_posts()): the_post(); ?>

<section id="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</section>

	<?php endwhile; endif; ?>　
</article>

　修正したものをSafariで見てみたのが下図。投稿記事毎に＜post＞で括られるべきなのでしょう、たぶん。

＜post＞エリアの間隔はbottom込みで

　以前、第５１回で「当サイトでは基本的に「bottom」で間隔調整はしないという自分ルール」と決めたのだけれど、今回、カテゴリーページやアーカイブページ等で複数の投稿記事がまとめて表示されるような場面では、例外的に「bottom」も加えて調整しようかと。つまり「＜post＞エリアの間隔はbottom込みで行う」ということになります。ただし現時点で何となくそう思っているだけで、他の様々な要素が絡んできて不具合が出たら、臨機応変に変更。

　そこで早速 margin のボトムで間隔を空けてみると、＜post＞エリア同士の間は開くのはいいが、下地のグレーが見えてしまう…。

　そこで padding を使うんだけれど、何度ボトムに値を入れても全く反映されない。すんごく悩んでいろいろ試しているうち「auto」を使っちゃダメだということに気付きました。実は…生まれて初めて知った！そうと知らずにここまでやり過ごしてきたけれど、それでも何となくサイト運営出来ていたのはまさに偶然の重なり合いの中をくぐり抜けてゆく運の強さ…というか、実はこれまで、必要な箇所にだけトップ・ライト・ボトムっていう感じで個別にpx単位で数値打ってきたから気付かなかったのだろうと思われます。←言い訳。

section#post {
	width: 800px;
	height: auto;
	background-color: white;
	margin: 0px 0px 0px 140px;
	padding: 0px 0px 30px auto;　/*　←autoを使っちゃダメなのね。ちゃんと数値で0pxと打つ。*/
	border: 2px solid greenyellow;
}

しかし別の問題が

　これで何となくレイアウトが決まったか！と思いきや、不思議な現象に悩まされるのであった。どうしても＜post＞エリアの最後とフッターとの間に隙間が生じてしまい、それを埋めることが出来無いのです。

　いろいろ調べているうち、どうやら上で修正したループの置き方で結果が変わることが判明。前回までの「＜post＞の中にループを入れている」というミスしてる状態だとこの隙間は出現しないのだけれど、修正後の「ループの中に＜post＞を入れる」状態だと隙間が出来る…。これはどうすべきなのかしらん。たぶんWebデザインをちゃんと勉強した人には簡単に回避方法が分かるのかもしれないけれど、僕は全く思い付きません。そしてこの問題を誰かに問い合わせるための正しい質問の仕方も判らない…どう説明すればいいの？この現象。
…と、何とか自力で解決しようとアレコレ奮闘していたら原因判明！

空スペースが混入していました。

　前途多難である…。１時間以上も調べてしまった。ついでに、全く本件とは関係ないですが、いろいろ調べていて勉強になりそうなものを見つけたので掲載しておきます。

　アレコレのミスを直して、ひとまずこんなカタチに出来ました。次回は「丸アイコン」と、個別記事タイトル周りに手を付けてみたいと思います。つづく。

　変だ。今回の記事は２時間くらいで書き上げる予定だったのに…。

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