はてなアンテナのCSS（試案）

　「はてなアンテナ」（以下「HA」）とは、 株式会社はてなによって提供されているサービスで、 ユーザー登録（無料）をしてチェックして欲しいページのURLを登録しておけば、 以後自分のページにアクセスするたびに 「登録しておいたページの内、どれがいつ更新されたのか」を教えてくれる大変便利なシステムです。 ご存知なかった人には、是非ご利用をお勧めします。

　ということで今回は、そのHAを少し使いやすくする（かも知れない）CSSを２つ紹介したいと思います。 これらを使えば、あなたの愛用のHAが使いやすくなるか使いにくくなるかのどちらかであるとお約束します。
　尚、以下の設定は簡略化のため、「ヘッダの色」は「抹茶」に設定し、 「ページのヘッダ」はh1要素のみ（<h1>○×アンテナ</h1>）、 という状態でのものになっております。 他の要素を付け加えたい方、他の色やフォントサイズにしたい方は各自弄って下さい。

段組風アンテナ

　まず、一つ目。HAを使っていると、アンテナ登録サイトがだんだん増えてきて、 新たに更新されたサイトが一画面に収まりきらなくなってくることがあります。 文字サイズや行間の設定である程度カバーはできますが、これにも限界があります。そこで別アプローチ。 リストを２列にしてしまうわけです。

　具体的にはHAの設定モードで、スタイルシートを以下のように設定します。

body {
 margin: 0;
 padding: 0;
 background-color: #f0ffe0;
}

a{font-weight: bolder; }
a:link{color:#0000ff; text-decoration:underline;}
a:visited{color:#800080; text-decoration:none;}
a:active{color:#ff0000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:none; background-color:#d6e2ce;}

h1{
 background-color: #fff;
 margin:0;
 padding:4px 32px;
 font-size:140%;
}

p.pager{
 text-align:right;
 margin:8px 24px;
}

p.diff{
 height:64px;
 overflow: auto;
 background-color: #e3eefd;
 font-size:90%;
}

ol{
 margin: 0;
 padding:5px 0 0 0;
 line-height:130%;
}

li{
 float:left;
 width:49%;
 margin:0 2px 2px 2px;
 font-size:80%;
}

li a{ font-size:125%;}

form.hatena-searchform {
 text-align: right;
 margin-right: 5%;
}
div.footer {
 color: #ccc;
 margin: 16px;
 font-size: 90%;
 text-align: center;
}

　参考：IE6.0での表示シンプルモード、アンテナモード

　HAに登録したサイトが多ければ多いほど、重宝する設定かと思います。

　尚、一つ補足をさせて頂くと、この設定を使われるならHAに長いタイトルでページを登録するのは避けた方が良いかもしれません。 フォントサイズやウインドウサイズにもよるのですが、あまり長いタイトルだと改行が発生し、微妙に見栄えが悪くなるのです。
　逆に条件次第では、２列どころか３列、４列にするというのもアリでしょう。

タブ型アンテナ

　次に、二つ目。多数のページをHAに登録している方の多くは、それらをグループ編集モードでジャンル分けし、 整理されていることでしょう。そのジャンル分けをタブ型の表示にする方法を紹介します。
　折角なので上の設定と組み合わせて使ってみます。 HAの設定モードで、スタイルシート以下の通りに設定します。

body {
 margin: 0;
 padding: 0;
 background-color: #f0ffe0;
}

a{font-weight: bolder; }
a:link{color:#0000ff; text-decoration:underline;}
a:visited{color:#800080; text-decoration:none;}
a:active{color:#ff0000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:none; background-color:#d6e2ce;}

h1{
 background-color: #fff;
 margin:0;
 padding:4px 32px;
 font-size:140%;
}

p.pager{
 text-align:right;
 width:100%;
 margin:0 0 6px 0;
 padding:3px 8px;
 font-size: 1px;
 color: #f0ffe0;
 background-color: #fff;
 border-bottom:solid 1px #666;
 height: 18px;
}

p.pager b , p.pager a{
 font-size: 16px;
 padding:3px 6px;
 margin:0 1px;
 border-top:1px #666 solid;
 border-right:1px #666 solid;
 border-left:1px #666 solid;
 position: relative; 
}

p.pager b{
 color:#000;
 background-color: #f0ffe0;
 border-bottom:2px #f0ffe0 solid;
}

p.pager a{
 border-bottom:1px #666 solid;
 background-color: #e3eefd;
 text-decoration:none;
}

p.pager br{display:none;}

p.diff{
 height:64px;
 overflow: auto;
 background-color: #e3eefd;
 font-size:90%;
}

ol{
 margin: 0;
 padding:5px 0 0 0;
 line-height:130%;
}

li{
 float:left;
 width:49%;
 margin:0 2px 2px 2px;
 font-size:80%;
}

li a{ font-size:125%;}

form.hatena-searchform {
 text-align: right;
 margin-right: 5%;
}
div.footer {
 color: #ccc;
 margin: 16px;
 font-size: 90%;
 text-align: center;
}

　参考：IE6.0での表示シンプルモード、アンテナモード

　若干強引にタブを作っていますが、まあ別に問題ないレベルかと思います。
　ただこのCSS、HAの「シンプル」モードなら問題ないものの、 「アンテナ」モード、「詳細」モードだといまいちタブっぽくならないんですよね……（上記スクリーンショットをご覧下さい）。 この設定は、「シンプル」モードで閲覧されることを想定したHAに特にお薦めしたいと思います。

タブ型アンテナVer.2　（04年5月23日追記）

　小さい画像を使って、よりタブっぽくしてみました。「アンテナ」モード、「詳細」モードでもそれっぽく見えるはずです。 スタイルシートを、以下のように設定して下さい。
　二つの画像、サンプル画像１サンプル画像１、 サンプル画像２サンプル画像２を使っています。

body {
 margin: 0;
 padding: 0;
 background-color: #f0ffe0;
}

a{font-weight: bolder; }
a:link{color:#0000ff; text-decoration:underline;}
a:visited{color:#800080; text-decoration:none;}
a:active{color:#ff0000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:none; background-color:#d6e2ce;}

h1{
 margin:0;
 padding:4px 32px;
 font-size:140%;
}

p.pager{
 text-align:right;
 background-image:url("画像１のURL"); /*この行に画像1のURLを入力*/
 background-position:0 0 ;
 background-repeat:repeat-x;
 width:100%;
 margin:0 0 6px 0;
 padding:3px 8px;
 font-size: 1px;
 color: #f0ffe0;
 text-align: right;
 background-color: #fff;
 border-bottom:solid 1px #666;
 height: 18px;
}

p.pager b , p.pager a{
 font-size: 16px;
 padding:3px 6px;
 margin:0 1px;
 border-top:1px #666 solid;
 border-right:1px #666 solid;
 border-left:1px #666 solid;
 position: relative; 
}

p.pager b{
 color:#000;
 background-color: #f0ffe0;
 border-bottom:2px #f0ffe0 solid;
 background-image:url("画像２のURL"); /*この行に画像2のURLを入力*/
 background-position:0 0 ;
 background-repeat:repeat-x;
}
p.pager a{
 border-bottom:1px #666 solid;
 background-color: #e3eefd;
 text-decoration:none;
}

p.pager br{display:none;}

p.diff{
 height:64px;
 overflow: auto;
 background-color: #e3eefd;
 font-size:90%;
}

ol{
 margin: 0;
 padding:5px 0 0 0;
 line-height:130%;
}

li{
 float:left;
 width:49%;
 margin:0 2px 2px 2px;
 font-size:80%;
}

li a{ font-size:125%;}

form.hatena-searchform {
 text-align: right;
 margin-right: 5%;
}
div.footer {
 color: #ccc;
 margin: 16px;
 font-size: 90%;
 text-align: center;
}

　参考：IE6.0での表示シンプルモード、アンテナモード

　尚、HAには画像アップロード機能はないので、その辺については各自で解決をお願いします。 （同じく株式会社はてなによるサービスである「はてなダイアリー」を使うのが簡単かと思います。）

段組アンテナ　（04年9月5日追記）

　ブログなどでよくある段組（マルチカラム/メニューと本文が左右で分かれた形式）をはてなアンテナでもやってみたくなり、作りました。

　参考：IE6.0での表示シンプルモード、アンテナモード

*{margin:0; padding:0;}
body{ background-color:#dec;}

a{ text-decoration:none;}
a:link{color:#0000ff;}
a:visited{color:#800080;}
a:active{color:#ff0000;}
a:hover{ color:#ff0000;}

b{font-weight:normal;}

h1{
 background-color:#dec;
 padding:8px 32px;
 font-size:140%;
 text-align:right;
}

p.pager{
 font-size: 1px;
 width:22%;
 margin:1px 4px;
 color: #dec;
 float:left;
}
p.pager b,p.pager a{
 margin:4px 6px;
 padding:5px 6px;
 font-size: 16px;
 display:block;
 width:90%;
}
p.pager b{
 color: #111;
 background-color:#dec;
 background-color: #f0ffe0;
 border-top:1px solid #888;
 border-left:1px solid #888;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
}
p.pager a{
 background:#dfc;
 border-top:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #888;
 border-bottom:1px solid #888;
}
p.pager a:hover{
 background-color: #f0ffe0;
 border-top:1px solid #888;
 border-left:1px solid #888;
 border-right:12px solid #6a9;
 border-bottom:1px solid #ccc;
}

ol{
 margin: 5px 5px;
 width:74%;
 background-color: #f0ffe0;
 display:block;
 border-top:1px solid #888;
 border-left:1px solid #888;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 float:left;
}
ol li{
 list-style:none;
 margin:8px 2px 2px 6px;
 font-weight:bold;
}

p.pager br{display:none;}

p.diff{
 margin:0 5px 12px 32px;
 padding:4px;
 background-color: #fff;
 font-size:90%;
 border-top:1px solid #888;
 border-left:1px solid #888;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 font-weight:normal;
}
form.hatena-searchform {
 text-align: right;
 margin-right: 5%;
}
div.footer {
 color: #333;
 margin: 16px;
 font-size: 90%;
 text-align: right;
}

　残念ながら、アンテナモードだと段組っぽさが若干薄れます……が、それでも視覚的にはなかなか面白いCSSかと思います。

タブ型アンテナ別バージョン（04年9月5日追記）

　以前のタブ型アンテナおよびタブ型アンテナVer.2には、 アンテナモードだとあまりタブっぽくならないという欠点がありました。それを克服した（？）のが このバージョンです。

　参考：IE6.0での表示シンプルモード、アンテナモード

　※ブラウザ毎の表示のズレを調整することができず、 公開を停止させて頂きました。修正できたら再公開いたします。

公開：2004年5月4日　最終更新：2004年10月4日

戻る