【スタイルシート】はてなブックマークウィジェットのデザインをカスタマイズする。

Posted by kumacchi on 2010年12月1日 , No comment

はてなブックマークの人気記事を貼り付ける事が出来るブログパーツ、はてなブックマークウィジェットですが、デフォルトのデザインは下の青い色１択しかありません。ブログに貼り付けてみたけどうちのブログはピンク基調なのでどうもマッチしない。

ブログの人気記事を貼り付ける

20100579

そこでテーマをなしにしてみると下の様になる。

20100580

そして実際に取得したタグをブログに貼り付けてみると下の様になる。これだとあまりにもそっけないので、ブラウザの機能を使って要素を調べながらデザインをカスタマイズしてみた。

20100581

結果下の様にカスタマイズする事ができた。

20100582

実際に定義したスタイルシートを以下に示します。はてなブックマークウィジェットのデザインをカスタマイズする場合に参考にしてください。

hatena.css

/*外枠の定義*/
#hatena-bookmark-widget0{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

width:187px !important;
background-color:#F27DB4 !important;
}

/*フッターとヘッダーの定義*/
div.hatena-bookmark-widget-footer,div.hatena-bookmark-widget-title{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

background-color:#F27DB4 !important;
padding:10px;
}

/*フッターとヘッダーのリンクの定義1*/

div.hatena-bookmark-widget-footer a,div.hatena-bookmark-widget-title a{
font-weight:bold;
color:#FFFFFF;
}

/*フッターとヘッダーのリンクの定義2*/
div.hatena-bookmark-widget-footer a:link, div.hatena-bookmark-widget-title a:link { text-decoration:none;}
div.hatena-bookmark-widget-footer a:visited,div.hatena-bookmark-widget-title a:visited{ text-decoration:none;}
div.hatena-bookmark-widget-footer a:active, div.hatena-bookmark-widget-title a:active { text-decoration:none;}
div.hatena-bookmark-widget-footer a:hover, div.hatena-bookmark-widget-title a:hover { text-decoration:underline;}

/*リスト ULの定義*/
div.hatena-bookmark-widget-body ul{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    background-color:#ffccff !important;
    padding:10px;
    margin:2px;
}

/*リスト LIの定義*/
div.hatena-bookmark-widget-body li{
list-style:none;
margin:5px 0px 5px 0px;
}

/*リストのタイトル部分のリンクの定義*/

a.hatena-bookmark-entrytitle { color: #0044CC; text-decoration:none;}
div.hatena-bookmark-widget-body a:hover { color: #0044CC; text-decoration:underline;}

/*リストのブックマーク数部分のリンクの定義*/
span.hatena-bookmark-count a:link { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:visited { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:active { color: #FF0000; text-decoration:none;}
span.hatena-bookmark-count a:hover { color: #FF0000; text-decoration:underline;}

(Visited 86 times, 1 visits today)

タグ : スタイルシート, ブログパーツ