Hatena Blog Tags

はてなダイアリーガイド「CSSセレクタ」

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

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

図を見て選んだ部分のCSSセレクタ(の例)を示すガイドですくわしい説明はこちら)。スタイルシートが少し書ければ、ちょっとずつデザイン変更していけることを目的にしています。そのセレクタに関連したコツや、HTML構造の概略なども載っています。追加・修正いただけると幸いです。

日記全体の構造とセレクタ

調べたい部分をクリックしてください。日記のテーマによってちょっと見栄えが違うと思いますが、勘で補ってください。日記画像は「はてなダイアリー日記」からです元画像)。

HTMLの概略

<html>
  <head></head>
  <body>
    <table>ヘッダテーブル</table>
    <h1></h1>
    <div class="hatena-body">
      <div class="main">
        <div class="calendar"><前の日 | 次の日></div>
        <div class="day">日記1日分</div>
        <div class="calendar"><前の日 | 次の日></div>
      </div>
      <div class="sidebar">
        カレンダーモジュールなど
      </div>
    </div>
  </body>
</html>

body

ページの表示全体。

日記全体に背景色をつける→はてなダイアリーガイド「ページ全体の見栄えを変えてみよう1〜背景の色」

ヘッダテーブルをページの端までぴったりくっつけたいときは

body {padding: none;}

逆に離したいときは

body {padding: 20px;} /*数字は適当*/

など。

bodyごと左右にに寄せる

bodyにmarginが効かないブラウザがあります(IE)。なのでbodyではなく、table、h1、div.hatena-bodyにそれぞれ指定します。以下は両側を空ける指定ですので片側だけにしたり数値を調整したりしてみてください。

table,h1,div.hatena-body {
 margin-right: 10%; /*←右を空ける。100pxのような絶対単位指定も可。*/
 margin-left: 10%; /*←左を空ける。100pxのような絶対単位指定も可。*/
 width: 80%; /*←100%が指定されていることが多いので増やしたmarginの分、減らす*/
}
table table { /*←ヘッダテーブル内のメニューテーブル*/
 margin-right: 0;
 margin-left: 0;
 width: 100%;
}

※この指定だけでは使用テーマによってうまくいかなかったり、他の不都合が起きることも多々あると思いますが、微調整法はケースバイケースなのでここでは示せません。

全体の幅を固定して中央に配置する

ブログでよくあるスタイル。chiffonテーマのようにヘッダテーブル以下全体の幅をピクセル単位で固定して、両側の空きをウィンドウ幅に合わせるパターン。これも上記の問題からbodyではなく、table、h1、div.hatena-bodyにそれぞれ指定します。

body {
 margin : 0px;
 padding : 0px;
 text-align: center ;
 background-color: #ffcc66; /*←効果をわかりやすくするため。なくても良い*/
}

table {
 width : 750px ; /*←数値は適当*/
 margin	: 0 auto ;
}

h1 {
 width : 750px ; /*←数値は適当*/
 margin	: 0 auto; 
 padding : 20px 0px; /*←なくても良い*/
 text-align: center ; /*←なくても良い*/
 background-color: #ffffff; /*←効果をわかりやすくするため。なくても良い*/
}

div.hatena-body {
 width : 750px ; /*←数値は適当*/
 margin	: 0 auto ;
 text-align : left;
 background-color: #ffffff; /*←効果をわかりやすくするため。なくても良い*/
}

など。※この指定だけでは使用テーマによってうまくいかなかったり、他の不都合が起きることも多々あると思いますが、微調整法はケースバイケースなのでここでは示せません。

[戻る▲]

ヘッダテーブル

非表示にしたりするのは、はてなの規約で禁止(有料オプション利用時は、管理ツール画面からの設定で消せる)。ページ上部に、ロゴ画像がきちんと見えていれば、スタイル変更はいいようだ。

とはいえクラスが割り振られていないので、セレクタ選びは一工夫必要になって来る。やはり、いじりにくいところ。→はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」
[戻る▲]

h1

日記のタイトル。よくありそうな指定としては、

h1 {
 border-bottom: none;  /*下線を消す*/
 font-size: 100%;  /*文字サイズを変える*/
 color: <a href="http://www.kanzaki.com/docs/html/htminfo17-2.html#color-value">色の値</a>;  /*色を変える*/
}

日記タイトルを画像やリンクにしたとき

管理ツール > 日記の設定 > 日記の基本設定 - タイトルの設定で日記タイトルを画像やリンクにしたときのセレクタ。

タイトルがリンク
  • h1 a
    • h1 a:link
    • h1 a:visited
    • h1 a:hover
    • h1 a:active

(例)リンクでも文字色を黒に(元ネタ:manpukuyaさん)

h1 a:link,h1 a:visited,h1 a:hover,h1 a:active {
 color:#000;
}
タイトルが画像
  • h1 img
タイトルがリンク画像
  • h1 a img
    • h1 a:link img
    • h1 a:visited img
    • h1 a:hover img
    • h1 a:active img

(例)画像にリンクを示す枠を表示しない

h1 a img {
 border:none;
}

日記タイトルを非表示にする

h1 {
 display: none;
}

CSSの話ではないけれど、これでさらにヘッダ日記のタイトルのすぐ下日記本文の真上imgタグで画像を貼ると、(構造的にはdiv.hatenabody内だしh1要素でもないけど)タイトルが画像になったようなかんじになります(位置の微調整などの方法は、テーマや貼る画像によるので省略)。

日記タイトルに背景画像を入れる1

「タイトルを画像に置き換える」のはスタイルシートではなくタイトルの設定で画像をアップロードする方法があります。

h1 {
 background-image:url("画像のURL");
}

ですが、下のやり方の方が融通は利きます。

日記タイトルを画像にする・日記タイトルに背景画像を入れる2

けっこう面倒です。marginpaddingwidthheightbackground-imageなど、ここで使うプロパティについて予備知識を持ってください(とほほのスタイルシート入門)。

またタイトル画像を入れる場所については「ヘッダテーブルの中に画像を挿入する方法」や、上記のようにHTMLでヘッダにimgタグで画像を貼る比較的簡単な方法もあります。スタイルシート以前の問題になりますので、目的に良く合う場所を選んでください。

次の方法は日記タイトルをCSSで非表示にし、h1の位置に近づけるためヘッダのHTMLはdiv.hatena-bodyをいったん閉じ、タイトルを記述して、またdiv.hatena-bodyを展開する方法です。

h1 { display: none;}

h1.dummy { /*←dummyというクラス名は適当*/
 display: block;
 padding: 0.5em 10% 0.5em 10%; /*←中に文字でタイトルを書く場合、適当な数値を*/
 /*その他、文字でタイトルを書く場合はそれに必要な指定を追加。*/
}

div.nikki-title { /*←nikki-titleというクラス名は適当*/
 margin: 0 0 0 0; /*←テーマでh1に指定されていた数値などを*/
 background-color: 色の値; /*←背景が見えて必要な場合*/
 background-image: url("表示したい画像のURL");
 background-position: top left;
 background-repeat: no-repeat;
 width: 100%; /*←または配置する画像の幅の数値などを*/
 height: 300px; /*←配置する画像の高さの数値などを*/
}

span.empty { display: none;} /*←emptyというクラス名は適当*/

のようにします。画像だけで文字タイトルを入れない場合は、h1.dummyの記述を外します。
そして「ヘッダ」の最上部に、以下のようにhtmlを書き入れます。

<span class="empty"> </span>
</div>
<div class="nikki-title">
<h1 class="dummy">日記タイトル</h1>
</div>
<div class="hatena-body">

div.nikki-tittle内は、h1に限らず通常のdiv要素同様、自由に記述ができます。span.emptyは閉じて空になったはずの上部div.hatena-bodyがIEで表示されてしまうのを、子要素に引っ張られる形で非表示になるバグを使って消す目的。

この例では背景画像を繰り返しません(background-repeat:no-repeat;)が、画像をタイル状に並べる時などは以下のようにします。

  • 『background-repeat: repeat;』……背景画像を縦横方向に繰り返し並べる
  • 『background-repeat: repeat-x;』……背景画像を横方向に繰り返し並べる
  • 『background-repeat: repeat-y;』……背景画像を縦方向に繰り返し並べる
  • 『background-repeat:no-repeat;』……背景画像を繰り返さない
  • 『background-repeat:inherit;』……上位の要素から継承。たぶんここでは滅多に使わないです。

また背景画像の配置位置はbackground-position、背景色はbackground-colorで変更できます。

※使用テーマによってうまくいかなかったり、他の不都合が起きることも多々あると思いますが、微調整法はケースバイケースなので示しきれません。

(図なし)日記タイトル横にアイコン表示の場合

  • このページをアンテナに追加,RSSフィード……h1 img.icon
  • リンクの状態によって変える場合……h1 img.icon a
    • h1 a:link img.icon
    • h1 a:visited img.icon
    • h1 a:hover img.icon
    • h1 a:active img.icon

[戻る▲]

div.hatena-body

日記のヘッダ部分・本文・フッタ部分をひっくるめたまとまり。div.mainとdiv.sidebarもこの中に収まっている。

[戻る▲]

div.main

div.sidebarと対になっている要素。主に日記本文部分の幅を決める。div.main(.main)に対する指定がないテーマは“サイドバー非対応”で、自分で書かなければいけない。hatenaテーマでは

div.main {
 margin-left: 18%; /*左の要素からページ幅の18%離れる*/
}

これだけ。

またヘッダに<div class="main">、フッタに</div>と書きこんでおかないと、初期設定のままでは該当部分が存在しないので効かない。(かんたんデザイン設定では自動的に書き込まれる)
[戻る▲]

div.sidebar

div.mainと対になるサイドバーのセレクタ。サイドバーの幅などを決める。これがないテーマはサイドバー非対応なので、自分で書かなければいけない。

フッタ(かヘッダ)に以下のように書いた部分がサイドバーになる。div.sidebarの指定が効く所。(かんたんデザイン設定では自動的に書き込まれる)

<div class="sidebar">
サイドバーに入れたいもの。モジュールのタグとか。
</div>

[戻る▲]

div.calendar

<前の日 | 次の日>といった部分。日記の上下に2カ所ある。

[戻る▲]

はてなダイアリーガイド「CSSセレクタ」について

「CSSセレクタ」目次

これはスタイルシートでなにかを指定したい時に、セレクタが一発でみつかるという目的のものでして、セレクタ決めを補助するものです。スタイルシートの基礎知識はとほほのスタイルシート入門などをご覧ください。

  • はてなダイアリーをやっているとなかなか覚える機会がない「HTML」を理解していなくても、セレクタ{プロパティ:値;}っていうのを知っていれば、ちょっと日記のデザインをいじれるようになる
  • 自分でセレクタを選べる人にとっても、セレクタ決めの補助としては便利
  • テーマ作成や日記全体のデザインをするようなときは(あんまり役に立たないかもしれませんが)、HTML構造も載せるのでそちらを見てください

というものでございます。

  1. 図を見ていじりたいところを選ぶ
  2. セレクタ(の例)が載っている
  3. そのセレクタに関するコツ情報(へのリンク)が載っている
  4. HTML構造の概略が載っている

という使い方です。

現在、はてなダイアリーガイド「CSSセレクタ」で対応していないもの
・編集、設定、コメント投稿、キーワード画面などの図(セレクタ自体はほとんど共通しますが)
・menuモジュール、searchformモジュール、counterモジュール、pvモジュール等のモジュール
asin/isbn 記法の詳細モードで生成される部分
また新しい部分への対応漏れはあると思います。説明項目の追加、歓迎です。
はてなダイアリーガイド「CSSセレクタ」で説明しにくいもの
これは「この部分の色を変えたい」「文字を変える」「枠線を変える」「背景を変える」「間隔を開ける・詰める」といった、比較的単純な指定には向いている資料だと思うのですが、フロートやマージンを使って「オブジェクト間の調整」をしたい場合は、あまり役に立たないかもしれません。図の中では要素同士の相関関係や「ここのすきまは〜」なんていうのは、ちょっと示しにくいことなどがありまして、やはりレイアウトに関することは、HTML構造を理解していないと一発でセレクタを探すというのはなかなか難しそうです。
セレクタの選び方について
セレクタは要素やクラスの組み合わせで実際には無数に考えられますが、「既存のテーマをちょっといじるときに使いやすい」ものを紹介する方向から、「Hatenaテーマ」に準拠した形にしています。「要素+クラス」の形をベースにして、その他の候補があれば追加して例示しています。
追加・修正、大歓迎!
詳しい方、間違ってるところを見つけたら直してプリーズ。各セレクタにはそれを使った小技やコツ(へのリンク)がありますが、充実していくと便利です。なんかいいのがあったらキーワード編集して追加してください。日記上からの意見(こんなの追加したら?とか、間違ってる、とか)も歓迎です。

[戻る▲]

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。