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

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

※作図はできていません。悪しからず…

セレクタ階層

• div.hatena-module /* モジュール全体(他のモジュールも共通) */
  • div.hatena-moduletitle /* モジュールタイトル(他のモジュールも共通) */
  • div.hatena-modulebody /* モジュール本文(他のモジュールも共通) */
    • div.hatena-profile /* profileモジュール本文(他のモジュールとは別) */
      • p.hatena-profile-image /* プロフィール写真の段落 */
        • p.hatena-profile-image img /* プロフィール写真 */
        • p.hatena-profile-image a /* プロフィール写真のリンク(以下リンク状態別) */
          • p.hatena-profile-image a:link /* 未訪問 */
          • p.hatena-profile-image a:visited /* 訪問済み */
          • p.hatena-profile-image a:hover /* ポインタで触れたとき */
          • p.hatena-profile-image a:active /* クリックの瞬間 */
      • p.hatena-profile-id /* ユーザーIDの段落 */
        • p.hatena-profile-id a /* ユーザーIDのリンク(以下写真リンクと同様) */
          • p.hatena-profile-id a:link
          • p.hatena-profile-id a:visited
          • p.hatena-profile-id a:hover
          • p.hatena-profile-id a:active
      • p.hatena-profile-body /* 一行プロフィールの段落 */

HTML構造概略

 <div class="hatena-module">
  <div class="hatena-moduletitle">プロフィール</div>
  <div class="hatena-modulebody">
   <div class="hatena-profile">
    <p class="hatena-profile-image"><a><img src="(プロフィール写真のURL)"></a></p>
    <p class="hatena-profile-id"><a>ID</a></p>
    <p class="hatena-profile-body">一行プロフィール</p>
   </div>
  </div>
 </div>

div.hatena-module

モジュール全体。「template="hatena-module"」を使用したアンテナ型モジュールなどと共通です。
[戻る▲]

div.hatena-moduletitle

モジュールのタイトル。div.hatena-module同様「template="hatena-module"」を使用した他のモジュールと共通です。
[戻る▲]

div.hatena-modulebody

モジュールの内容全体を包括しています。「template="hatena-module"」を使用した他のモジュールと共通の設定をしたい場合はこのセレクタを使い、それとは違う独自の設定をしたい場合には、次のdiv.hatena-profileを使います。
[戻る▲]

div.hatena-profile

profileモジュールの内容全体を包括しています。ただし他のモジュールとはセレクタが異なるので、独自の設定をしたい場合にこのセレクタを使い、「template="hatena-module"」を使用した他のモジュールと共通の設定をしたい場合には、前のdiv.hatena-modulebodyを使います。

文字の大きさを調節したい場合は

div.hatena-profile {
	font-size: 80%; /* パーセントはお好みで */
}

hatena以外のテーマの場合、プロフィール写真・ユーザーID・一行プロフィールそれぞれの間が空きすぎることがあります。この空きを埋めたい場合は

div.hatena-profile p {
	margin: 0; padding: 0;
}

[戻る▲]

p.hatena-profile-image

プロフィール写真の段落です。管理ツールの「プロフィール」でアップロードした画像が表示されます。(ただし幅または高さが120ピクセルを超える画像は自動的にリサイズされます)
また、aboutページへのリンクにもなっています。

• p.hatena-profile-image img /* プロフィール写真 */
• p.hatena-profile-image a /* プロフィール写真のリンク(以下リンク状態別) */
  • p.hatena-profile-image a:link /* 未訪問 */
  • p.hatena-profile-image a:visited /* 訪問済み */
  • p.hatena-profile-image a:hover /* ポインタで触れたとき */
  • p.hatena-profile-image a:active /* クリックの瞬間 */

写真をサイドバーの幅に対し中央寄せしたい場合は

p.hatena-profile-image {
	text-align: center; /* 右寄せしたい場合は center を right に */
}

hatena以外のテーマの場合、たいてい枠線が表示されているはずです。これを消したい場合は

p.hatena-profile-image img {
	border: 0;
}

[戻る▲]

p.hatena-profile-id

ユーザーIDの段落です。aboutページへのリンクになっています。

• p.hatena-profile-id a
  • p.hatena-profile-id a:link
  • p.hatena-profile-id a:visited
  • p.hatena-profile-id a:hover
  • p.hatena-profile-id a:active

[戻る▲]

p.hatena-profile-body

一行プロフィールの段落です。管理ツールの「プロフィール」で設定した一行プロフィールが表示されます。

[戻る▲]