「CSSセレクタ」トップに戻る はてなヘッダ色サンプル
このテーブル全体。クラスも割り振られてないし親要素もbodyくらいなので、要素名のまんまのセレクタになっちゃいます。もともと改造してほしくないところだからでしょうけども。
有料オプションを利用せず、スタイルシートで非表示にするのは、はてなの利用規約違反です。どこまで見栄えを変更して良いかと言う明確な可否の線引きは、まだはてなから示されていませんが、テーブルがページ最上部にあって、ロゴがきちっと見えている範囲なら改造して良いようなかんじです。とはいえ他の部分よりは難易度が高く制約が多いでしょう。
ヘッダをいじるためにこの「table」でなにか指定すると、すべてのtable要素(カレンダーとか)に影響するので、他のtable要素のために指定を“打ち消し”していく必要があります。「div.hatena-body table」などでうまく一括して打ち消せればいいですが、実際には個々に指定しないといけないことが多いかもしれません。
[戻る▲]
ロゴ画像。あんまりいじるとまずいところ。リンク状態で分けるなら
「検索」の画像はinput要素なので別。
[戻る▲]
検索窓の入力フォームと「検索」ボタン。ほとんどいじりようがない。
下の段はさらにtable>center>tbodyタグの中に入っているので上の段と区別できる。
この段の各リンクはセルに入っているので、セル(図のGとHのセル,Iのセルたち)を指定するなら「table table td」を使う。
この段の上下の、色の違う細い横線はborderではなく高さ1ピクセルの「td」。この色を変えるには「td」をセレクタにしてbackground-colorを変えなければならない。当然td要素すべてに影響してしまうのでとても厄介な所。
table table { background-color: 色コード*; background-image:url("画像のアドレス"); background-position:left top; background-repeat:no-repeat; padding-top: 用意した画像と同じ高さpx; padding-bottom: 0px; }
という具合に、背景画像として配置する。この例では背景画像を繰り返さない(background-repeat:no-repeat;)が、画像をタイル状に並べる時などは以下のようにする。
※使用テーマによってうまくいかなかったり、他の不都合が起きることも多々あると思いますが、微調整法はケースバイケースなのでここでは示しきれません。
※テーブル以外でヘッダに画像を入れる方法としては日記タイトルに背景画像を入れるがあります。
[戻る▲]
ログイン時に出るユーザーネーム。リンクになっている。「I」の「table tbody td a font」でも選択されるが、マークアップの順が違うのでここだけ「table tbody td font a」にできる。 「I」の指定の後に書くこと。
[戻る▲]
下の段のリンク。「H」の指定の前に書く。
[戻る▲]
<table> <tr> <td><a><img alt="Hatena::"></a><a><img alt="Diary"></a></td> <td><form><font><input><input alt="検索"><br><img></font></form></td> <td><a><img alt="はてな"></a></td> </tr> <tr><td><img src="/images/dot.gif"></td></tr> <tr> <td> <div> <center> <table> <tbody> <tr> <td>ようこそ<a><font>userID</font></a>さん</font></td> <td><a><font>トップ</font></a></td> <td><a><font>最新の日記</font></a></td> <td><a><font>日記を書く</font></a></td> <td><a><font>設定</font></a></td> <td><a><font>ログアウト</font></a></td> <td><a><font>ヘルプ</font></a></td> </tr> </tbody> </table> </center> </div> </td> </tr> <tr><td><img src="/images/dot.gif"></td></tr> </table>
[戻る▲]
<table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#1841CE" nowrap><a href="http://www.hatena.ne.jp/"><img border="0" src="/images/hatena_de.gif" width="104" height="40" alt="Hatena::"></a><a href="/"><img border="0" src="/images/diaryde.gif" width="60" height="40" alt="Diary"></a></td> <td valign="bottom" align="left" bgcolor="#1841CE" width="60%" nowrap><form method="GET" action="/hatenadiary/searchdiary" style="margin: 0;"><font color="#5279E7" size="2"> <input type="text" name="word" value="" size="18" style="font-size: 8pt"> <input type="image" name=".submit" alt="検索" src="/images/searchde.gif" align="top" style="width:34px;height:20px;border:0px"><br><img border="0" src="/images/dot.gif" width="1" height="3" alt=""></font></form></td> <td align="right" bgcolor="#1841CE"><a href="http://www.hatena.ne.jp/"><img border="0" src="/images/hatenade.gif" width="82" height="40" alt="はてな"></a></td> </tr> <tr> <td width="100%" bgcolor="#06289B" colspan="3"><img border="0" src="/images/dot.gif" width="1" height="1" alt=""></td> </tr> <tr> <td width="100%" bgColor="#ffffff" colspan="3"> <div align="center"> <center> <table cellSpacing="0" cellPadding="2" width="100%" border="0"> <tbody> <tr> <td bgcolor="#5279E7" width="50%" nowrap><font color="#C9D5F8" size="2"> ようこそ<a href="/userID/" style="text-decoration:none; font-weight:100;"><font color="#C9D5F8">userID</font></a>さん </font></td> <td bgcolor="#5279E7" nowrap align="center"><a href="/" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">トップ</font></a></td> <td bgcolor="#5279E7" nowrap align="center"><a href="/userID/" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">最新の日記</font></a></td> <td bgcolor="#5279E7" nowrap align="center"><a href="/userID/edit" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">日記を書く</font></a></td> <td bgcolor="#5279E7" nowrap align="center"><a href="/userID/configdetail" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">設定</font></a></td> <td bgcolor="#5279E7" nowrap align="center"><a href="/logout" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">ログアウト</font></a></td> <td bgcolor="#5279E7" nowrap align="center"><a href="http://hatenadiary.g.hatena.ne.jp/" style="text-decoration:none; font-weight:100;"><font size="2" color="#C9D5F8">ヘルプ</font></a></td> </tr> </tbody> </table> </center> </div> </td> </tr> <tr> <td width="100%" bgcolor="#06289B" colspan="3"><img border="0" src="/images/dot.gif" width="1" height="1" alt=""></td> </tr> </table>
[戻る▲]