制作意図
はてなアイデアidea:447*1を要望したときも思ったことなのですが、kanoseさんのエントリid:kanose:20050526:hatenamixiにもあるような、カスタマイズされた形でのはてな各サービスへのポータルのようなものが欲しくて、とりあえずできる範囲で作ってみました。
本当はCGIとかで、並べ順とかを設定すると好きな順番で並べて書き出してくれるものを作れると良いんですけど、残念ながらPerlの経験がほとんどないのでよく分かりません。
並べ順は左の列が情報発信系（ただし最後の行は除く）中列がどちらともいえないもの、右の列が情報受信系のサービスになっています。独断で、上から使いそうな順番に並べてみました。最下部の行は、他に使いそうなサービスとして入れてみました。
ご利用方法
CSSを含むHTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Description" content="はてな羅針盤">
<title>はてな羅針盤 Ver. 0.1</title>
<!--はてなの主要機能にジャンプできます。-->
<!--好きなように並べ順を組み替えてください。-->
<!--カスタマイズの詳細はhttp://d.hatena.ne.jp/Yuny/20050527/p1のエントリで。-->
<!--動作確認はNetscape 7.1 for Macintoshです-->
<!-- 作者＝はてなid:Yuny-->
<style TYPE="text/css">
<!--
/*背景設定*/
body{
background-color: #f5f5f5;
}
/*外枠の設定*/
div.cpanel{
margin: 10px;
}
/*横行の設定*/
ul.cpanel{
list-style:none;
clear: both;
}
/*マス目の設定*/
li.cpanel{
margin: 10px;
list-style:none;
float:left;
}
/*バナーの設定*/
img.cpanel{
height:31px;
border: 1px solid #d2b48c;
}
-->
</style></head>
<body>
<h4>はてなサービスのリンクパネル『はてな羅針盤 Ver. 0.1』</h4>
<!--このソースのサポートページ-->
<a target="_blank" href="http://d.hatena.ne.jp/Yuny/20050527/p1" title="このソース配布元へ">このソース配布元へ</a><br />
<div class="cpanel">
<ul class="cpanel">
<li class="cpanel">
<!--サービス：はてなダイアリー-->
<a target="_blank" href="http://d.hatena.ne.jp/" title="はてなダイアリー"><img class="cpanel" src="http://d.hatena.ne.jp/images/diaryde.gif" alt="はてなダイアリー"></a><a target="_blank" href="http://d.hatena.ne.jp/your___id/" title="Myはてなダイアリー">Myはてなダイアリー</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fd.hatena.ne.jp%2F" title="ダイアリーログイン">ログイン</a>／
<a target="_blank" href="http://d.hatena.ne.jp/help" title="ダイアリーヘルプ">ヘルプ</a>／
<a target="_blank" href="http://d.hatena.ne.jp/hatenadiary/" title="ダイアリーサポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：人力検索サイトはてな-->
<a target="_blank" href="http://www.hatena.ne.jp/" title="人力検索サイトはてな"><img class="cpanel" src="http://i.hatena.ne.jp/images/hatena_de.gif" alt="人力検索サイトはてな"></a><a target="_blank" href="http://www.hatena.ne.jp/user?userid=your___id" title="人力検索の履歴">My人力検索履歴</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3a%2f%2fwww%2ehatena%2ene%2ejp%2f" title="人力検索ログイン">ログイン</a>／
<a target="_blank" href="http://www.hatena.ne.jp/help/help0101" title="人力検索ヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatena/" title="人力検索サポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：はてなRSS-->
<a target="_blank" href="http://r.hatena.ne.jp/" title="はてなRSS"><img class="cpanel" src="http://r.hatena.ne.jp/images/rssde.gif" alt="はてなRSS"></a><a target="_blank" href="http://r.hatena.ne.jp/your___id/" title="MyはてなRSS">MyはてなRSS</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fr.hatena.ne.jp%2F" title="はてなRSSログイン">ログイン</a>／
<a target="_blank" href="http://r.hatena.ne.jp/help" title="はてなRSSヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenarss/" title="はてなRSSサポート日記">サポート日記</a>
</li>
</ul>
<ul class="cpanel">
<li class="cpanel">
<!--サービス：はてなグループ-->
<a target="_blank" href="http://g.hatena.ne.jp/" title="はてなグループ"><img class="cpanel" src="http://g.hatena.ne.jp/images/groupde.gif" alt="はてなグループ"></a><a target="_blank" href="http://g.hatena.ne.jp/your___id/" title="Myはてなグループ">Myはてなグループ</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fg.hatena.ne.jp%2F" title="はてなグループログイン">ログイン</a>／
<a target="_blank" href="http://g.hatena.ne.jp/help" title="はてなグループヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenagroup/" title="はてなグループサポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：はてなアイデア-->
<a target="_blank" href="http://i.hatena.ne.jp/" title="はてなアイデア"><img class="cpanel" src="http://i.hatena.ne.jp/images/idea_de.gif" alt="はてなアイデア"></a><a target="_blank" href="http://i.hatena.ne.jp/your___id/" title="Myはてなアイデア">Myはてなアイデア</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fi.hatena.ne.jp%2F" title="はてなアイデアログイン">ログイン</a>／
<a target="_blank" href="http://i.hatena.ne.jp/help" title="はてなアイデアヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenaidea/" title="はてなアイデアサポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：はてなブックマーク-->
<a target="_blank" href="http://b.hatena.ne.jp/" title="はてなブックマーク"><img class="cpanel" src="http://b.hatena.ne.jp/images/Bookmarkde.gif" alt="はてなブックマーク"></a><a target="_blank" href="http://b.hatena.ne.jp/your___id/" title="Myはてなブックマーク">Myはてなブックマーク</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fb.hatena.ne.jp%2F" title="はてなブックマークログイン">ログイン</a>／
<a target="_blank" href="http://b.hatena.ne.jp/help" title="はてなブックマークヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenabookmark/" title="はてなブックマークサポート日記">サポート日記</a>
</li>
</ul>
<ul class="cpanel">
<li class="cpanel">
<!--サービス：はてなフォトライフ-->
<a target="_blank" href="http://f.hatena.ne.jp/" title="はてなフォトライフ"><img class="cpanel" src="http://d.hatena.ne.jp/images/keyword/72730.gif" alt="はてなフォトライフ"></a><a target="_blank" href="http://f.hatena.ne.jp/your___id/" title="Myはてなフォトライフ">Myはてなフォトライフ</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3a%2f%2ff%2ehatena%2ene%2ejp%2f" title="はてなフォトライフログイン">ログイン</a>／
<a target="_blank" href="http://f.hatena.ne.jp/help" title="はてなフォトライフヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenafotolife/" title="はてなフォトライフサポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：はてなカウンター-->
<a target="_blank" href="http://counter.hatena.ne.jp/" title="はてなカウンター"><img class="cpanel" src="http://counter.hatena.ne.jp/images/counter.gif" alt="はてなカウンター"></a><a target="_blank" href="http://counter.hatena.ne.jp/your___id/" title="Myはてなカウンター">Myはてなカウンター</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fcounter.hatena.ne.jp%2F" title="はてなカウンターログイン">ログイン</a>／
<a target="_blank" href="http://counter.hatena.ne.jp/help" title="はてなカウンターヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenacounter/" title="はてなカウンターサポート日記">サポート日記</a>
</li>
<li class="cpanel">
<!--サービス：はてなアンテナ-->
<a target="_blank" href="http://a.hatena.ne.jp/" title="はてなアンテナ"><img class="cpanel" src="http://a.hatena.ne.jp/images/antennade.gif" alt="はてなアンテナ"></a><a target="_blank" href="http://a.hatena.ne.jp/your___id/" title="Myはてなアンテナ">Myはてなアンテナ</a><br />
<a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fa.hatena.ne.jp%2F" title="はてなアンテナログイン">ログイン</a>／
<a target="_blank" href="http://a.hatena.ne.jp/help" title="はてなアンテナヘルプ">ヘルプ</a>／
<a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenaantenna/" title="はてなアンテナサポート日記">サポート日記</a>
</li>
</ul>
<ul class="cpanel">
<li class="cpanel">
<!--サービス：はてな検索-->
<a target="_blank" href="http://search.hatena.ne.jp/" title="はてな検索"><img class="cpanel" src="http://search.hatena.ne.jp/images/search.png" alt="はてな検索"></a><br />
</li>
<li class="cpanel">
<!--サービス：はてなポイント-->
<p><a target="_blank" href="http://www.hatena.ne.jp/order" title="はてなポイント購入">はてなポイント購入</a></p>
<p><a target="_blank" href="https://www.hatena.ne.jp/sslsendpoint" title="はてなポイント送信">はてなポイント送信（SSL）</a></p>
</li>
</ul>
</div>
</body>
</html>注意）
はてなのサーバの不調なのか、たまに上記ソースからコメントアウトした部分が表示されないみたいです。
もしも、
<title>はてな羅針盤 Ver. 0.1</title>
の下が５行ほど不自然に空いているときは、CSSを含めたコメントアウトした部分が消えてしまっていますので、こちらからテキスト版ソースをダウンロードしてお使いください。（Yahoo! ブリーフケースに飛びます）
htmlの構造とカスタマイズについて
tableタグは使っていません。すべてulとliタグ、それを冒頭のCSSで表のように組んでいます。
┌────┬────┬────┐ ｕｌ│ ｌｉ │ ｌｉ │ ｌｉ │ ├────┼────┼────┤ ｕｌ│ ｌｉ │ ｌｉ │ ｌｉ │ ├────┼────┼────┤ ｕｌ│ ｌｉ │ ｌｉ │ ｌｉ │ ├────┼────┼────┘ ｕｌ│ ｌｉ │ ｌｉ │ └────┴────┘
ですので、機能の並べ替えをしたい場合は、li.........../liで挟まれた部分を移動すればいいわけです。
オリジナルclass名として"cpanel"をdiv要素、ul要素、li要素に振っていますが、これは次項のダイアリー対応のためです。
ダイアリーなどのヘッダやフッタで使いたい場合について
はてなダイアリーやグループのヘッダやフッタに設置したい場合は、以下のようにして下さい。
まず、以下のCSSソースを、詳細設定画面のスタイルシート欄に書き加えます。これが無いと表のようになりません。
/*はてな羅針盤*/
/*外枠の設定*/
div.cpanel{
margin: 10px;
}
/*横行の設定*/
ul.cpanel{
list-style:none;
clear: both;
}
/*マス目の設定*/
li.cpanel{
margin: 10px;
list-style:none;
float:left;
}
/*バナーの設定*/
img.cpanel{
height:31px;
border: 1px solid #d2b48c;
}
/*はてな羅針盤ここまで*/次に、以下のソースをいったん検索／置換機能のあるテキストエディタにペーストし、「your___id」という文字列でリンクが組まれていますので、全てをご自分のid名に置換してからヘッダやフッタに書き加えます。
もしも、日記本文内に設置するときは「ちょっとした更新」を使って下さい!!
（はてなのサポート日記全てに無用なトラックバックが飛んでしまいます!!）
<!--はてな羅針盤 Ver. 0.1--> <!--このソースのサポートページはhttp://d.hatena.ne.jp/Yuny/20050527/p1--> <div class="cpanel"> <ul class="cpanel"> <li class="cpanel"> <!--サービス：はてなダイアリー--> <a target="_blank" href="http://d.hatena.ne.jp/" title="はてなダイアリー"><img class="cpanel" src="http://d.hatena.ne.jp/images/diaryde.gif" alt="はてなダイアリー"></a><a target="_blank" href="http://d.hatena.ne.jp/your___id/" title="Myはてなダイアリー">Myはてなダイアリー</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fd.hatena.ne.jp%2F" title="ダイアリーログイン">ログイン</a>／ <a target="_blank" href="http://d.hatena.ne.jp/help" title="ダイアリーヘルプ">ヘルプ</a>／ <a target="_blank" href="http://d.hatena.ne.jp/hatenadiary/" title="ダイアリーサポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：人力検索サイトはてな--> <a target="_blank" href="http://www.hatena.ne.jp/" title="人力検索サイトはてな"><img class="cpanel" src="http://i.hatena.ne.jp/images/hatena_de.gif" alt="人力検索サイトはてな"></a><a target="_blank" href="http://www.hatena.ne.jp/user?userid=your___id" title="人力検索の履歴">My人力検索履歴</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3a%2f%2fwww%2ehatena%2ene%2ejp%2f" title="人力検索ログイン">ログイン</a>／ <a target="_blank" href="http://www.hatena.ne.jp/help/help0101" title="人力検索ヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatena/" title="人力検索サポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：はてなRSS--> <a target="_blank" href="http://r.hatena.ne.jp/" title="はてなRSS"><img class="cpanel" src="http://r.hatena.ne.jp/images/rssde.gif" alt="はてなRSS"></a><a target="_blank" href="http://r.hatena.ne.jp/your___id/" title="MyはてなRSS">MyはてなRSS</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fr.hatena.ne.jp%2F" title="はてなRSSログイン">ログイン</a>／ <a target="_blank" href="http://r.hatena.ne.jp/help" title="はてなRSSヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenarss/" title="はてなRSSサポート日記">サポート日記</a> </li> </ul> <ul class="cpanel"> <li class="cpanel"> <!--サービス：はてなグループ--> <a target="_blank" href="http://g.hatena.ne.jp/" title="はてなグループ"><img class="cpanel" src="http://g.hatena.ne.jp/images/groupde.gif" alt="はてなグループ"></a><a target="_blank" href="http://g.hatena.ne.jp/your___id/" title="Myはてなグループ">Myはてなグループ</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fg.hatena.ne.jp%2F" title="はてなグループログイン">ログイン</a>／ <a target="_blank" href="http://g.hatena.ne.jp/help" title="はてなグループヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenagroup/" title="はてなグループサポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：はてなアイデア--> <a target="_blank" href="http://i.hatena.ne.jp/" title="はてなアイデア"><img class="cpanel" src="http://i.hatena.ne.jp/images/idea_de.gif" alt="はてなアイデア"></a><a target="_blank" href="http://i.hatena.ne.jp/your___id/" title="Myはてなアイデア">Myはてなアイデア</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fi.hatena.ne.jp%2F" title="はてなアイデアログイン">ログイン</a>／ <a target="_blank" href="http://i.hatena.ne.jp/help" title="はてなアイデアヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenaidea/" title="はてなアイデアサポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：はてなブックマーク--> <a target="_blank" href="http://b.hatena.ne.jp/" title="はてなブックマーク"><img class="cpanel" src="http://b.hatena.ne.jp/images/Bookmarkde.gif" alt="はてなブックマーク"></a><a target="_blank" href="http://b.hatena.ne.jp/your___id/" title="Myはてなブックマーク">Myはてなブックマーク</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fb.hatena.ne.jp%2F" title="はてなブックマークログイン">ログイン</a>／ <a target="_blank" href="http://b.hatena.ne.jp/help" title="はてなブックマークヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenabookmark/" title="はてなブックマークサポート日記">サポート日記</a> </li> </ul> <ul class="cpanel"> <li class="cpanel"> <!--サービス：はてなフォトライフ--> <a target="_blank" href="http://f.hatena.ne.jp/" title="はてなフォトライフ"><img class="cpanel" src="http://d.hatena.ne.jp/images/keyword/72730.gif" alt="はてなフォトライフ"></a><a target="_blank" href="http://f.hatena.ne.jp/your___id/" title="Myはてなフォトライフ">Myはてなフォトライフ</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3a%2f%2ff%2ehatena%2ene%2ejp%2f" title="はてなフォトライフログイン">ログイン</a>／ <a target="_blank" href="http://f.hatena.ne.jp/help" title="はてなフォトライフヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenafotolife/" title="はてなフォトライフサポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：はてなカウンター--> <a target="_blank" href="http://counter.hatena.ne.jp/" title="はてなカウンター"><img class="cpanel" src="http://counter.hatena.ne.jp/images/counter.gif" alt="はてなカウンター"></a><a target="_blank" href="http://counter.hatena.ne.jp/your___id/" title="Myはてなカウンター">Myはてなカウンター</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fcounter.hatena.ne.jp%2F" title="はてなカウンターログイン">ログイン</a>／ <a target="_blank" href="http://counter.hatena.ne.jp/help" title="はてなカウンターヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenacounter/" title="はてなカウンターサポート日記">サポート日記</a> </li> <li class="cpanel"> <!--サービス：はてなアンテナ--> <a target="_blank" href="http://a.hatena.ne.jp/" title="はてなアンテナ"><img class="cpanel" src="http://a.hatena.ne.jp/images/antennade.gif" alt="はてなアンテナ"></a><a target="_blank" href="http://a.hatena.ne.jp/your___id/" title="Myはてなアンテナ">Myはてなアンテナ</a><br /> <a target="_blank" href="https://www.hatena.ne.jp/sslregister?mode=login&backurl=http%3A%2F%2Fa.hatena.ne.jp%2F" title="はてなアンテナログイン">ログイン</a>／ <a target="_blank" href="http://a.hatena.ne.jp/help" title="はてなアンテナヘルプ">ヘルプ</a>／ <a target="_blank" href="http://hatena.g.hatena.ne.jp/hatenaantenna/" title="はてなアンテナサポート日記">サポート日記</a> </li> </ul> <ul class="cpanel"> <li class="cpanel"> <!--サービス：はてな検索--> <a target="_blank" href="http://search.hatena.ne.jp/" title="はてな検索"><img class="cpanel" src="http://search.hatena.ne.jp/images/search.png" alt="はてな検索"></a><br /> </li> <li class="cpanel"> <!--サービス：はてなポイント--> <p><a target="_blank" href="http://www.hatena.ne.jp/order" title="はてなポイント購入">はてなポイント購入</a></p> <p><a target="_blank" href="https://www.hatena.ne.jp/sslsendpoint" title="はてなポイント送信">はてなポイント送信（SSL）</a></p> </li> </ul> </div> <br /><br /><br /><br />
以上です。
直すところとかがあればコメントください。分かる範囲で対処します。＞教えてはてなダイアリー
