図を見て選んだ部分のCSSセレクタ(の例)を示すガイドです(くわしい説明はこちら)。スタイルシートが少し書ければ、ちょっとずつデザイン変更していけることを目的にしています。そのセレクタに関連したコツや、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>
ページの表示全体。
日記全体に背景色をつける→はてなダイアリーガイド「ページ全体の見栄えを変えてみよう1〜背景の色」
ヘッダテーブルをページの端までぴったりくっつけたいときは
body {padding: none;}
逆に離したいときは
body {padding: 20px;} /*数字は適当*/
など。
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 { border-bottom: none; /*下線を消す*/ font-size: 100%; /*文字サイズを変える*/ color: <a href="http://www.kanzaki.com/docs/html/htminfo17-2.html#color-value">色の値</a>; /*色を変える*/ }
管理ツール > 日記の設定 > 日記の基本設定 - タイトルの設定で日記タイトルを画像やリンクにしたときのセレクタ。
(例)リンクでも文字色を黒に(元ネタ:manpukuyaさん)
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要素でもないけど)タイトルが画像になったようなかんじになります(位置の微調整などの方法は、テーマや貼る画像によるので省略)。
「タイトルを画像に置き換える」のはスタイルシートではなくタイトルの設定で画像をアップロードする方法があります。
h1 { background-image:url("画像のURL"); }
ですが、下のやり方の方が融通は利きます。
けっこう面倒です。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-position、背景色はbackground-colorで変更できます。
※使用テーマによってうまくいかなかったり、他の不都合が起きることも多々あると思いますが、微調整法はケースバイケースなので示しきれません。
[戻る▲]
div.sidebarと対になっている要素。主に日記本文部分の幅を決める。div.main(.main)に対する指定がないテーマは“サイドバー非対応”で、自分で書かなければいけない。hatenaテーマでは
div.main { margin-left: 18%; /*左の要素からページ幅の18%離れる*/ }
これだけ。
またヘッダに<div class="main">、フッタに</div>と書きこんでおかないと、初期設定のままでは該当部分が存在しないので効かない。(かんたんデザイン設定では自動的に書き込まれる)
[戻る▲]
div.mainと対になるサイドバーのセレクタ。サイドバーの幅などを決める。これがないテーマはサイドバー非対応なので、自分で書かなければいけない。
フッタ(かヘッダ)に以下のように書いた部分がサイドバーになる。div.sidebarの指定が効く所。(かんたんデザイン設定では自動的に書き込まれる)
<div class="sidebar">
サイドバーに入れたいもの。モジュールのタグとか。
</div>
[戻る▲]
「CSSセレクタ」目次
これはスタイルシートでなにかを指定したい時に、セレクタが一発でみつかるという目的のものでして、セレクタ決めを補助するものです。スタイルシートの基礎知識はとほほのスタイルシート入門などをご覧ください。
というものでございます。
という使い方です。
[戻る▲]