はてブのウィジェットをデザインは維持しつつ自前のCSSで表示させる方法

hatebu_pictop.png
はてブのウィジェットのデザインをCSSで編集していくことを目的として。とりあえず自前のCSS経由でもほぼ同じに。

ここで言うはてブのウィジェットは”ブログの人気記事を貼りつけられる「はてなブックマークウィジェット」”ってやつです。

理由


テーマ「なし」に変える理由

IEでみた時にフォントが気持ち悪いから。ほかにもデザインの自由度が上がるし、important!を使わなくて済む。

デザインを変えない理由

あとで変える。初期状態を保存しておくと後々いいかなとも思って。

はじめよう


はてブのウィジェットをテーマ「デフォルト」から「なし」に。(ブログパーツの設定から)

要素の名前が変わるのでCSSをコピーするだけではダメ。
テーマ「デフォルト」のCSS → http://b.hatena.ne.jp/css/widget.css

変更点

hatebu-class-notheme.png
.hatena-bookmark-widgetが.hatena-bookmark-widget-nothemeに

.hatena-bookmark-widget {margin: 0 auto;padding-top: 6px;}も
.hatena-bookmark {margin: 0 auto;padding-top: 6px;}に変更しないと

コピーしていく

ここからはコピーしていく。基本的にそのままコピーだが、見た目をトレースするために最小限編集している。以下が編集したり、独自で追加した部分。最終的にできたCSSは最後に貼り付けてある。

.hatena-bookmark div.hatena-bookmark-widget-title {
のmargin-right: 5px;を無効
background: none repeat scroll 0 0 #5279E7;←色はiromiruで
border-radius: 5px 5px 0 0;上左右丸く border-radius: 6px 6px 0 0;6か7でも行けそう


.hatena-bookmark div.hatena-bookmark-widget-footer に
border 1px solid #DDDDDD; 上は除く ←liからコピー
border-top-width: 0;
marginとpaddingを無効
border-radius: 0 0 5px 5px;

background{}を消して
background-color: #F3F3F3;
フォントの種類だけ。


.hatena-bookmark div.hatena-bookmark-widget-footer a span {の
background: url("/images/widget/logo.gif;") no-repeat scroll center top rgba(0, 0, 0, 0);
text-indent: -9999em;
を無効に

color: #5279E7;
font-weight: 600;

影を付けるといいのかも。


hatebu-notheme-copywithcss.png
トレースしたのがこれ右がnotheme化して、cssにしたもの。head.gif/foot.gif/logo.gifはないけど、Bのfaviconは読み込んでる。

border分の1pxだけ長い。角のborder-radiusは6pxにしてある。7でもいい気もするし5くらいのほうが好きな気もある。ここからはお好みで。

読み込みできなかった.gifの指定を消していく。
.hatena-bookmark div.hatena-bookmark-widget-title a{
background:url(/images/widget/head.gif) right top no-repeat;
.hatena-bookmark ul li.isfirst{background:url(/images/widget/load.gif) no-repeat center center;}
.hatena-bookmark div.hatena-bookmark-widget-footer a{
background:url(/images/widget/foot.gif) right bottom no-repeat;


私は画像を使わないようにしたいので、ダウンロードして自分のブログから画像を入れることはしません。その代わりにデザイン的に完コピはできず(特にfoot部分のフォント)、妥協もあります。

自分好みに編集するとしたら

まずやっていくこと
.hatena-bookmark * {
のフォント指定を無効に(サイト内の他の文字と同じに)

見た目的にfoot部分だけはfont-family: arial,helvetica,verdana,sans-serif;を維持すべきかも。

できたCSS


最終的にこうなりました。
.hatena-bookmark *{margin:0;padding:0;border:0;font-family:arial,helvetica,verdana,sans-serif;font-size:100%;line-height:1.2;}
.hatena-bookmark{font-size:12px;width:200px;border-bottom:0;text-align:center;}
.hatena-bookmark div.hatena-bookmark-widget-title{font-weight:bold;text-align:left;background: none repeat scroll 0 0 #5279E7;padding-left:5px;border-radius: 6px 6px 0 0;}
.hatena-bookmark div.hatena-bookmark-widget-title img{margin-right:5px;margin-bottom:-2px;}
.hatena-bookmark div.hatena-bookmark-widget-title a{display:block;color:#fff;padding:7px 3px;margin-right:-5px;}
.hatena-bookmark a:link{color:blue;text-decoration:none;}
.hatena-bookmark a:visited{color:purple;text-decoration:none;}
.hatena-bookmark a:active{color:red;text-decoration:none;}
.hatena-bookmark a:hover{text-decoration:underline;}
.hatena-bookmark ul{list-style-type:none;border:1px solid #ddd;border-bottom:0;background:#f3f3f3;}
.hatena-bookmark ul li{font-size:90%;padding:0 5px;margin:0 !important;border-bottom:1px solid #ddd;text-align:right;height:4.5em;position:relative;background:0;}
.hatena-bookmark ul li *{vertical-align:bottom;}
.hatena-bookmark ul li img{margin-left:.5em;}
.hatena-bookmark ul li a.hatena-bookmark-entrytitle{display:block;text-align:left;padding:5px 0;height:2em;}
.hatena-bookmark ul li span.hatena-bookmark-nocount{display:block;padding-top:1em;text-align:center;font-size:12px;color:#999;}

.hatena-bookmark div.hatena-bookmark-widget-footer{
background-color: #F3F3F3;vertical-align:middle;line-height:3;border:1px solid #DDDDDD;border-top-width: 0;border-radius: 0 0 6px 6px;}
.hatena-bookmark div.hatena-bookmark-widget-footer a{display:block;padding:7px 0;margin-right:-5px;overflow:hidden;}
.hatena-bookmark div.hatena-bookmark-widget-footer a span{display:block;color: #5279E7;font-weight:600;}
.hatena-bookmark span.hatena-bookmark-count{position:absolute;bottom:3px;right:5px;}
.hatena-bookmark span.hatena-bookmark-count a{text-decoration:underline;}
.hatena-bookmark span.hatena-bookmark-count em a{background-color:#fff0f0;font-weight:bold;display:inline;font-style:normal;color:#f66;}
.hatena-bookmark span.hatena-bookmark-count strong a{background-color:#fcc;font-weight:bold;font-style:normal;display:inline;color:red;}

これをブログのCSSに貼り付けて使います。

テーマ「デフォルト」のままでもできることだけど、より多くいじっていくならnothemeにしてから始めるのもいいと思う。完全にサイト内と調和したデザインにしていってもいいし、目立つしはてブだってわかるからと小さく変えるだけでもいいと思う。小さく変えたい場合やCSSを自前で適用する際の参考にしてください。


ハセプロ スーパーマリオ 収納チェア ハテナボックス
ハセ・プロ
売り上げランキング: 94,561

"はてブのウィジェットをデザインは維持しつつ自前のCSSで表示させる方法" へのコメントを書く

お名前:[必須入力]
メールアドレス:
ホームページアドレス:
コメント:[必須入力]
認証コード:[必須入力]

※画像の中の文字を半角で入力してください。