気が付けばこの引っ越しシリーズも６５回に。１００回に到達する前には引っ越しを完了させたいと考えているのは変わらないのだけれど、一体どうしてこんなに長期連載になってしまったのか。そもそも「メモして書き残す」ことをしなければ、公開まで１ヶ月もかからないハズなのです。何せ当ブログも初めてWordPressを触った割には１ヶ月ほどで公開できたのですし。
　それだけ「（ほぼ実作業とリアルタイムで）ブログ記事に書く」というのは手間ヒマかかるのですが、そうなると音楽制作日記を始めることは、音楽を作るという本来の目的をかなり阻害するのではないか…という懸念が。

　さて。そんな瑣末な不安は引っ越し出来てから言えと。前回はたかが本文テキスト周りで手こずってしまいましたが、今回は丸アイコンと記事タイトル周りを攻めることにします。この「丸アイコン＋記事タイトル」というスタイルは２００９年の手打ちホームページ時代から始めてもう５年。個人的にとても気に入っているので、引っ越し先にも継承します。

タイトル部に全てをかける

　ブログ日記なんて、しょせん画像を貼って文章を書き残す、たったそれだけのもの。本体部分はどうでもいいから、「丸アイコン＋記事タイトル」だけは出来る範囲で頑張りたい。屈折しています。ひとまず、記事タイトル周りの各要素はこんな感じに配置してみる。

　点線のエリアがタイトル周り全体。実際には赤線の＜id=”title”＞を図の位置に設定して、記事タイトルの上下にそれぞれ「記事番号（通し番号）」と「投稿日」を、そして左端に丸アイコンを置きます。見出し要素は図のように考えているけれど、果たして記事タイトルには＜h1＞と＜h2＞、どちらを使うべきなのか悩んでおります。以前、コードネームに＜h1＞を使ってしまったのですが、それを＜h2＞にしてこちらは＜h1＞にする方が正しいような気がしないでもない…。加えて＜h5＞とか＜h6＞もこんな事に使っていいのか？という疑問も抱きつつ、ひとまず今はテキトーに先へ進んでしまいます。

投稿日時の取得

　まずは簡単なところから、記事を投稿した日（＜h6＞の部分）を取得してみます。

<section id="title">
	<img id="ICON" src="ICON_s.png" alt="ICON_s" >
	<h5>記事番号</h5>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<h6><?php echo get_the_date(); ?>更新</h6>
</section>

　2014年5月31日と投稿日が表示されました。

丸アイコンを横に配置する

　次に丸アイコン（id=”ICON”と設定）を左端に配置したいので、CSSにて margin のレフトにマイナス値を入れるのですが、何故か丸アイコンの右側にタイトル等の各見出し要素が回り込んでくれません。しばらく原因が分からず悩んでいて、流用していたCSSリセット部分に見出し要素への「clear: both;」が設定されているのに気付きました。コメントアウトして解消。

/*　見出し部分をコメントアウト
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
*/

〜略〜

/*　IDタイトル部分と、丸アイコンのCSS設定　*/

#post section#title {
	border: 3px solid red;
	height: auto;
	margin-top: 0px;
	padding-top: 0px;
}

#title img#ICON {
	width: 100px;
	height: 100px;
	margin: 0px 40px 0px -120px;
	vertical-align:bottom;
	float: left;
}

文字の装飾については後回し。次は丸アイコンの実際の運営方法について考えます。つづく。

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