はてなブックマークのマイページをちょっと変えるCSS

気になった記事や参考にしたい資料などをブラウザでブックマークしてしまうと、ブックマークの量が膨大になってしまい後々の整理・管理が大変になる。なのでそういった単一の記事などは、はてなブックマークをスクラップ帳のように使って管理している。任意のタグを登録できるので、記事の種類を細かく分けることが出来てとても便利だ。

しかし、このままでは少々味気なく使いにくいので、初期デザインを生かしたまま細かいところを修正するCSSを作成。主な変更点は下記の通り。

なお、ブラウザチェックはIE8、Firefox3.5、Google Chrome2で行った。

• プロフィール画像の拡大 (64px × 64px)
• ユーザーヘッダーに背景画像を追加 (右上揃え 縦170px)
• サーチバー・サーチウィンドウの透過 (IEでは不可)
• サーチウィンドウ内のはてなブックマーク数の表示を強調
• フォントサイズ調整
• リンクアンダーラインを削除し、ホバー色をオレンジ色に追加
• ブックマークURLの非表示

参考リンク：はてなブックマーク - an-other

*{text-decoration: none !important;}
a:hover, .pager-prev.shown:hover, .pager-next.shown:hover{color: #ff6600 !important;}
.timestamp, .url{font-family: tahoma !important;}
.category-link, .url, #related-tags, #tags{font-size: 0.9em !important;}
h3, .tags{font-size: 0.85em !important;}
#header{z-index: 400 !important;}
#user-header{
background: #ffffff url("http://img.f.hatena.ne.jp/images/fotolife/a/an-other/20090604/20090604171025.jpg") top right no-repeat !important;/*好きな画像を指定してください*/
}
.breadcrumbs{
position: absolute !important;
margin: 10px 0 0 30px !important;
padding: 0 !important;
background: none !important;
font-size: 0.8em !important;
}
h2 img{
width: 64px !important;
height: 64px !important;
border: 1px solid #cccccc !important;
}
#user-header img:hover, .profile-image:hover, .youtube:hover, .nicovideo:hover, .asin:hover{border-color: #ffbb00 !important;}
h2{
z-index: 100!important;
top: 30px !important;
left: 30px !important;
font-size: 1.4em !important;
color: #333333 !important;
}
.user-message{
position: absolute !important;
top: 133px !important;
left: 92px !important;
font-size: 0.8em !important;
}
#user-search-area{background-image: none !important;}
.user-search{
z-index: 300 !important;
position: absolute !important;
top: 140px !important;
right: 30px !important;
opacity: 0.8 !important;
}
.user-search:hover{opacity: 0.9 !important;}
#user-search-result-container{
z-index: 200 !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
opacity: 0.9 !important;
}
.entry-search{
padding-top: 1px !important;
font-size: 1.1em !important;
}
.user{
vertical-align: bottom !important;
font-weight: bold !important;
color: #ff0000 !important;
background: #ffcccc !important;
text-decoration: underline !important;
}
.user:hover{color: #ff0000 !important;}
.pager a, .pager strong {margin-left: 1px!important;}
.menu{
z-index: 1 !important;
margin: 0 !important;
padding-top: 56px !important;
}
#bookmarked_user{margin: 4px !important;}
.entry{padding-top: 2px !important;}
.category-link{
vertical-align: bottom !important;
border: none !important;
color: #333333 !important;
}
.nicovideo{height: 62px !important;}
.profile-image, .youtube, .nicovideo, .asin{border: 1px solid #d6e0f2;}
#related-tags .tag{display: table !important;}
#guest-message, .domain{display: none !important;}

2009/08/19 追記：ゲストメッセージの非表示を追加。