スマートフォン用の表示で見る

はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」

table

このテーブル全体。クラスも割り振られてないし親要素もbodyくらいなので、要素名のまんまのセレクタになっちゃいます。もともと改造してほしくないところだからでしょうけども。

有料オプションを利用せず、スタイルシートで非表示にするのは、はてなの利用規約違反です。どこまで見栄えを変更して良いかと言う明確な可否の線引きは、まだはてなから示されていませんが、テーブルがページ最上部にあって、ロゴがきちっと見えている範囲なら改造して良いようなかんじです。とはいえ他の部分よりは難易度が高く制約が多いでしょう。

ヘッダをいじるためにこの「table」でなにか指定すると、すべてのtable要素(カレンダーとか)に影響するので、他のtable要素のために指定を“打ち消し”していく必要があります。「div.hatena-body table」などでうまく一括して打ち消せればいいですが、実際には個々に指定しないといけないことが多いかもしれません。

[戻る▲]

tr

ロゴ画像が入っている段と、「ようこそ〜」がある段と、その上下の線のように細い段。

すべての「tr要素」に影響するので、日記内で他にもテーブルがあるときは対処が必要になってきます。

[戻る▲]

td

テーブルのセル。下の段の各リンクもセルに分かれてます。

すべての「td要素」に影響するので、日記内で他にもテーブルがあるときは対処が必要になってきます。

[戻る▲]

table a img

ロゴ画像。あんまりいじるとまずいところ。リンク状態で分けるなら

「検索」の画像はinput要素なので別。

[戻る▲]

table input

検索窓の入力フォームと「検索」ボタン。ほとんどいじりようがない。

table table(table div, table centerなどでも)

下の段はさらにtable>center>tbodyタグの中に入っているので上の段と区別できる。

この段の各リンクはセルに入っているので、セル(図のGとHのセル,Iのセルたち)を指定するなら「table table td」を使う。

この段の上下の、色の違う細い横線はborderではなく高さ1ピクセルの「td」。この色を変えるには「td」をセレクタにしてbackground-colorを変えなければならない。当然td要素すべてに影響してしまうのでとても厄介な所。

この段と上のHatenaロゴがある段の間に、画像を挿入する方法。

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;)が、画像をタイル状に並べる時などは以下のようにする。

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

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

※テーブル以外でヘッダに画像を入れる方法としては日記タイトルに背景画像を入れるがあります。

[戻る▲]

table table td font

下の段の文字すべて。

「ようこそ」「さん」以外を変えたい場合は、下のセレクタを使う。

[戻る▲]

table table td font a

ログイン時に出るユーザーネーム。リンクになっている。「I」の「table tbody td a font」でも選択されるが、マークアップの順が違うのでここだけ「table tbody td font a」にできる。 「I」の指定の後に書くこと。

[戻る▲]

table table td a font

下の段のリンク。「H」の指定の前に書く。

[戻る▲]

HTML概略

<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>

[戻る▲]

HTMLソース

<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">&nbsp;&nbsp;<input type="text" name="word" value="" size="18" style="font-size: 8pt">&nbsp;<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">&nbsp;ようこそ<a href="/userID/" style="text-decoration:none; font-weight:100;"><font color="#C9D5F8">userID</font></a>さん&nbsp;</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>

[戻る▲]