Twenty Tenのメイン部分のCSSカスタマイズ、今日はタイトルの下に表示される、投稿日や作成者などの部分のCSSについて考えたいと思います。投稿日はテーマによってはカレンダー風に表示させたりと、デザインしがいのある部分でもありますね。まずはTwenty Tenでどのようになっているのか、基本を確認してみたいと思います。

投稿日や作成者部分の囲み

投稿日や作成者部分の囲みには「entry-meta」というクラス名がついています。

div class="entry-meta"

これは分かりやすいですね。でも、このあと、ちょっとクラクラするくらい細かく指定されているんですよ。では見てみます。

投稿日

投稿日部分はブラウザでみると「投稿日: 2010年11月11日 」というように表示されています。

まずこの「投稿日:」は

span class="meta-prep meta-prep-author"

「meta-prep」と 「meta-prep-author」という２つのクラス名がついたspanでマークアップされています。

次の日付部分は

span class="entry-date"

というように「entry-date」というクラス名がついたspanでマークアップされています。

作成者

記事の作成者もブラウザでみると「作成者: admin 」などどというように表示されているでしょう。
これも「作成者:」が

span class="meta-sep

名前の部分が

span class="author vcard

というようにマークアップされています。

entry-metaのまとめ

まとめるとこんな感じです。

この細かいクラス名の付け方を利用して、どんな事ができるでしょうか。

投稿日にアイコンをつけてみる

このブログを例にして、「投稿日: 2010年11月11日 」という部分の「投稿日:」をアイコンに置き換えてみたいと思います。日付の横にあるような小さなカレンダーアイコンを用意しました。

まず、「投稿日:」の部分を「display: none;」で見えなくしてしまいましょう。

.entry-meta .meta-prep{
     display: none;
} 

日付の横にアイコンを背景として表示させます。

.entry-date{
      display: block;
      background-image: url(img/date.gif);
      background-repeat: no-repeat;
      padding: 0 0 0 25px;
}

背景をうまく出すために「display: block;」でブロック要素として表示させ、「background-image」で背景画像を指定します。左に画像と程よい余白分のpaddingをとって調整すれば、完成です。