超久しぶりのWEBネタ（笑）今回は、記事タイトルの左にポスト日を出すようにしてみました。
三連休をなにもなしに終われない（ぇ!）ので、頑張った（予定していた真空管ポタアンが手に入らず、ポッカリ空いた時間で懸案のアイキャッチ作成にチャレンジしてみました）
あちこちのブログで見かけるこーんなヤツ
実は、画像も要りません。WordPress の設定だけで出来てしまいます。てか、それが今日分かった(；ﾟ∀ﾟ)ゝ”
たぶん WordPress をお使いの方なら今更なテクだと思いますが、自分としては念願の演出なので。
今回紹介するソースは、テーマ「simplenote」を参考にさせていただきました。
Thank you Carla Izumi Bamford ♪
仕掛けはふたつ。
1. アイキャッチとして角丸に囲まれた月と日のフォームデザインを CSS（style.css）に追加
2. 角丸のアイキャッチをエントリーに表示するよう（index.php）に追記
以下が、その内容です。（折りたためたら良いんだけども、、、）
■ まずは、CSSへの追加内容です。例えば角丸の丸っぽさを変えたい時は、この中を弄ります。
div.post-date{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 10px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
float: left;
display: inline;
}
div.post-date div.month{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 9px;
padding-bottom: 3px;
padding-top: 3px;
padding-right: 9px;
background-color: #0A0A0A;
border-top: 1px solid #353535;
border-left: 1px solid #353535;
border-right: 1px solid #353535;
border-radius-top-left: 6px; /* CSS3 */
-webkit-border-top-left-radius: 6px; /* Safari,Google Chrome */
-moz-border-radius-topleft: 6px; /* Firefox */
border-radius-top-right: 6px; /* CSS3 */
-webkit-border-top-right-radius: 6px; /* Safari,Google Chrome */
-moz-border-radius-topright: 6px; /* Firefox */
font-size: 9px;
font-weight: none;
line-height: 9px;
font-family: Helvetica, Arial, Georgia, Garamond;
color: #EEEEEE;
text-transform: uppercase;
text-align: center;
text-shadow: none;
}
div.post-date div.day{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 9px;
padding-bottom: 3px;
padding-top: 3px;
padding-right: 9px;
font-size: 12px;
line-height: 12px;
color: #353535;
text-align: center;
font-weight: none;
background-color: #FFFFFF;
border-bottom: 1px solid #D1D1D1;
border-left: 1px solid #D1D1D1;
border-right: 1px solid #D1D1D1;
border-radius-bottom-left: 6px; /* CSS3 */
-webkit-border-bottom-left-radius: 6px; /* Safari,Google Chrome */
-moz-border-radius-bottomleft: 6px; /* Firefox */
border-radius-bottom-right: 6px; /* CSS3 */
-webkit-border-bottom-right-radius: 6px; /* Safari,Google Chrome */
-moz-border-radius-bottomright: 6px; /* Firefox */
text-shadow: none;
}
■ そして、こちらがエントリーを表示させている index.php への追記内容
どこへ入れたら良いかは、利用テーマによって違うので、各自でじっくり探して下さい。あと、キッチリやろうと思うなら、個別のポスト画面とかコメント画面とか、全部必要です。
<div class="post-date">
<div class="month">< ?php the_time('M') ?></div>
<div class="day">< ?php the_time('d') ?></div>
</div>
ちなみに、今回ブログ内にソースコードを表示させてますが、これもテクが必要でした。まんま貼り付けでは、ソースが機能してしまいますので。。。今回は「WP SyntaxHighlighter」って Plug-in のお世話になりました。ありがとう♪