タイトルに日めくり風日付を追加

Mohmongar

2015-06-21

思い立ってタイトルに日めくり風の日付を入れる。よく書いた日付がわからないブログがあって難儀するが、大きく日めくり風の日付表示をしているブログがなんか気に入ったので、真似てみる。あまりテーマを直接いじりたくなかったが、よいプラグインもなかったのでテーマを編集するしかなさそうだ。つかっているテーマはTwentyTenなので記事の表示はloop.phpとloop-singleのなか。 HTMLは

&lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
&lt;!--modidy start--&gt;
&lt;div class="postday"&gt;&lt;div class="month"&gt;&lt;?php the_time('m') ?&gt;&lt;/div&gt;&lt;div class="day"&gt;&lt;?php the_time('d') ?&gt;&lt;/div&gt;&lt;/div&gt;
&lt;!--modify end--&gt;
&lt;h2 class="entry-title"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;

CSSはCustom CSSを使っているのでプラグインからだが、style.cssでもいい。

div.postday {
	display: inline-block;
	font-size: 1em;
	line-height: 1em;
	height:3em;
    width:2em;
	float: left;
	border-top: 1px Solid black;
	border-left: 1px Solid black;
	border-bottom: 2px Solid black;
	border-right: 2px Solid black;
	border-radius: 0 0 10px 0;

	vertical-align: top;
	background-color: white;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
div.postday div.month {
	display:block;
	text-align: center;
	font-size: 0.75em;
	line-height: 1em;
	height: 1em;
	border: 0px solid gray;
	background-color: lightcyan;
}

div.postday div.day {
	display:block;
	text-align: center;
	font-size: 1.25em;
	line-height: 1.8em;
	height: 1.8em;
    border-top: 1px solid gray;
}

みたいな感じ。デザインはまたいじると思う。あとタイトル行の横に並べるために、

#content .entry-title {
   :
    display: inline-block;
   :
｝

としておく。