アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
記事タイトル下に表示される投稿日付とテーマの2行。これを1行にまとめて表示したいと思う方も多いんじゃないかと思います。どうにかならないものでしょうか？
投稿日付と投稿の属するテーマ（カテゴリー）、この2つは記事タイトルと直接関係の深い属性のようにも思うのですが、HTML上では別ブロックに属しています。タイトルは、記事のヘッダーを表すdiv.skinArticleHeaderブロック。日付とテーマはその次に配置されている記事本文ブロックのdiv.skinArticleBodyに属しています。まぁそれは、日付とテーマを1行で表示させたいというのと直接関係はありません。
HTMLを解析すると
投稿日付と投稿の属するテ－マ表示部分のソースコードを見てみます。
<div class="articleDetailArea skinWeakColor">
<span class="articleTime"><time datetime="2011-12-25" pubdate="pubdate">2011-12-25</time></span>
<span class="articleName"></span>
<br />
<span class="articleTheme">テーマ：
<!-- google_ad_section_start(name=s2, weight=.1) -->
<a href="http://ameblo.jp/jalan2-net/theme-10047057969.html" rel="tag">やってみよう！カスタマイズ</a>
<!-- google_ad_section_end(name=s2) --></span>
</div>何やら怪しい部分がありますね。
内容が空になっている<span class="articleName"></span>です。クラス名からすると記事の名前ですから、記事タイトルのようにも思いますが、h1タグで囲まれた本家の記事タイトルのほうには、skinArticleTitleクラスが指定されています。これ、何者でしょうか？ 将来の機能追加のために予約されている部分だったりするんでしょうか？ そうだとすると、あまり周辺をいじりたくはないですね。
さて、2行になっている表示部分ですが、HTMLでは日付の行のあとに<br />があり、改行してテーマの行を表示させるようになっています。それぞれの行にspan指定がされていますから、CSSで1行表示させることはできないことはないですね。
しかし、そこまでやる必要があるのか？ って思ってしまいますよね。それぞれがpタグで囲まれたブロックレベル要素ならあまり躊躇しないような気もするんですが、はっきり改行して表示せよって、書かれてるんですもんね。
ですので結論としては、「日付とテーマは、2行表示されるという前提のもとにデザインを考えたほうがよいだろう」ということになりました。
ちなみに、google_ad_sectionのコメント部分は、表示されるGoogle広告を、より記事の内容にマッチしたものにするためのものらしいです。「セクション ターゲットの概要とその設定方法 」というページで詳しく解説されています。