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

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

(コミュニティ)
はてなだいありーがいどしーえすえ

ガイドトップへ ・ ガイドトップ ・ 目次 ・ 索引

「CSSセレクタ」トップに戻る

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

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

セレクタは全体が「ul.hatena-photo」。
1つ1つの画像が「ul.hatena-photo li」および「img.hatena-photo」。
画像はリンクになっているので、リンク状態によって変える場合は

  • a img.hatena-photo
    • a:link img.hatena-photo (未訪問)
    • a:visited img.hatena-photo (訪問済み)
    • a:hover img.hatena-photo (マウスオーバー時)
    • a:active 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>

ネットの話題: はてなダイアリーガイド「CSSセレクタ - photoモジュール」

人気

新着

新着ブログ: はてなダイアリーガイド「CSSセレクタ - photoモジュール」