はてなダイアリーガイド「CSSセレクタ - photoモジュール」

CSSセレクタ - photoモジュール

photoモジュールのスクリーンショット

セレクタは全体が「ul.hatena-photo」。

1つ1つの画像が「ul.hatena-photo li」および「img.hatena-photo」。

画像はリンクになっているので、リンク状態によって変える場合は

のようにします。

キーワード「photoモジュール」に応用技がいくつか載っています。

template属性・フォトライフ画像一覧

ヘルプには載っていませんが、実は「template="hatena-module"」を指定することができます(かんたんデザインでは指定済み)。ただし、タイトルがつくだけです(画像部分のセレクタも同一)。

また、フォトライフの画像一覧である「template="hatena-photo"」を指定したrssモジュール(参照:id:hatenadiary:20050314:1110794301)は、タイトルのa要素(div.hatena-moduletitle a)だけを除き「template="hatena-module"」を指定したphotoモジュールと同じHTML構造をしています(セレクタも同一です)。

HTML構造概略

template属性なし

  <ul class="hatena_photo">
    <li><a><img class="hatena_photo"></a></li>
    <li><a><img class="hatena_photo"></a></li>
    <li><a><img class="hatena_photo"></a></li>
  </ul>

template属性あり

  <div class="hatena-module">
    <div class="hatena-moduletitle">最新の画像</div>
      <div class="hatena-modulebody">
        <ul class="hatena_photo">
          <li><a><img class="hatena_photo"></a></li>
          <li><a><img class="hatena_photo"></a></li>
          <li><a><img class="hatena_photo"></a></li>
        </ul>
    </div>
  </div>