記事下のカテゴリーなどへのリンク（entry-utility）〜Twenty Ten メイン部分のCSSカスタマイズ(7)

うわ、タイトルが収集つかないくらい長くなってしまいました。もう少し先を考えてから、タイトルを付け始めるのだったと反省しています。

さて、Twenty Ten メイン部分のCSSについて順々にみてきましたが、今日は記事の下の部分に出てくる、カテゴリーやタグ、コメントなどへのリンクの部分についてみてみようと思います。地味に細かいですが、書いているうちに意外な発見が！興味のある方はおつきあいください。

entry-utility

この部分は、「entry-utility」というdivで囲まれています。「entry-title」-「entry-meta」-「entry-content」-「entry-utility」と続く最後の部分です。ここまでがひと組となって、記事部分が構成されているわけですね。この中身をひとつずつみていきます。

属するカテゴリーへのリンク

始めの部分はその記事が属するカテゴリーへのリンクです。


<span class="cat-links">
　<span class="entry-utility-prep entry-utility-prep-cat-links">カテゴリー:</span>
         <a href="" title="CSSで考えるTwenty Ten カスタマイズ の投稿をすべて表示" rel="category tag">CSSで考えるTwenty Ten カスタマイズ</a>,
        <a href="" title="WordPress – 初級編 の投稿をすべて表示" rel="category tag">WordPress – 初級編</a></span>

全体が「cat-links」というクラス名のspanで囲まれています。「カテゴリー:」というタイトルにあたる部分に「entry-utility-prep」「entry-utility-prep-cat-links」というクラス名がついています。その後に属するカテゴリーへのリンクが、カンマで区切られて並んでいます。

区切り線

次の項目との間に入る区切り線です。

<span class="meta-sep">|</span>

　
「meta-sep」というクラス名のついたspanに囲まれた縦線ですね。この「meta-sep」というクラス名、「entry-utility」の中の区切り線すべてについている訳ですが、なんかきいたことあるな〜、と思って見直してみたら、

<span class="meta-sep">作成者:</span>

なんと、「entry-meta」のこの部分にも使われていました。別々のスタイルを当てはめたいと思ったら、要注意ですね。きちんと個別に指定してあげる必要があるようです。

.entry-meta .meta-sep{  }
とか
.entry-meta .entry-utility{  }
とかいう感じ

属するタグへのリンク


<span class="tag-links">
　　<span class="entry-utility-prep entry-utility-prep-tag-links">タグ:</span> <a href="" rel="tag">続きを読む</a></span>

　　　
全体が「tag-links」というクラス名のspanで囲まれています。カテゴリーと比べてみると分かりやすいですね。「cat」と「tag」が入れ替わっただけです。「entry-utility-prep」は共通、「entry-utility-prep-tag-links」も「cat」と「tag」が入れ替わっています。

コメントへのリンク

<span class="comments-link"><a href="" title="「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ（6） へのコメント">コメントをどうぞ</a></span>

コメントへのリンクは「comments-link」というクラス名のspanで囲まれています。

記事編集へのリンク

最後は、ログインしているときのみ表示される、記事編集へのリンクです。

<span class="edit-link"><a class="post-edit-link" href="" title="投稿編集">編集</a></span>

　　　
「edit-link」というspanで囲まれ、aタグに「post-edit-link」というクラス名がついています。

あれ？個別(シングル)ページ

ここまで書いて気付いたのですが、トップページではこれだけ細かくクラス指定しているのに、個別ページではいやにあっさりしています。

<div class="entry-utility">
カテゴリー: <a href="" title="CSSで考えるTwenty Ten カスタマイズ の投稿をすべて表示" rel="category tag">CSSで考えるTwenty Ten カスタマイズ</a>,
<a href="" title="WordPress – 初級編 の投稿をすべて表示" rel="category tag">WordPress – 初級編</a> &nbsp; タグ: <a href="http://webourgeon.net/tag/more/" rel="tag">続きを読む</a> &nbsp; <a href="" title="「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ（6） へのパーマリンク" rel="bookmark">この投稿のパーマリンク</a><span class="edit-link"><a class="post-edit-link" href="" title="投稿編集">編集</a></span>	
</div><!-- .entry-utility -->

同じ部分を書き出してみました。どうやら、これはテーマ内で「entry-utility」の中身を呼び出すのに、ページの種類によってやり方が違うようです。どうやら、トップページやカテゴリーなどの一覧ページでは細かくスタイルが指定されている様子。

分けてくれているので、個別(シングル)ページと一覧ページでデザインを変えるのにはよいですが、このままでは個別(シングル)ページで同じスタイルを適用できないんですね。う〜〜ん。

地味な割には、私にとって意外な発見のあった記事になりました。
奥が深いぞ、Twenty Ten！

Webourgeon

WordPressカスタマイズを中心としたWeb制作のあれこれ