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

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; /*←効果をわかりやすくするため。なくても良い*/
}

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

[戻る▲]

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

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

h1 a:link,h1 a:visited,h1 a:hover,h1 a:active {
 color:#000;
}

h1 a img {
 border:none;
}

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

h1 {
 display: none;
}

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

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

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

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

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

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

けっこう面倒です。margin、padding、width、height、background-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で変更できます。

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

■ （図なし）日記タイトル横にアイコン表示の場合

• ,……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

[戻る▲]