ガイドトップ 目次 索引
「CSSセレクタ」トップに戻る
はてなダイアリーガイド「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
一行プロフィールの段落です。管理ツールの「プロフィール」で設定した一行プロフィールが表示されます。
[戻る▲]