【スタイルシート】はてなブックマークウィジェットのデザインをカスタマイズする。
はてなブックマークの人気記事を貼り付ける事が出来るブログパーツ、はてなブックマークウィジェットですが、デフォルトのデザインは下の青い色1択しかありません。ブログに貼り付けてみたけどうちのブログはピンク基調なのでどうもマッチしない。
そこでテーマをなしにしてみると下の様になる。
そして実際に取得したタグをブログに貼り付けてみると下の様になる。これだとあまりにもそっけないので、ブラウザの機能を使って要素を調べながらデザインをカスタマイズしてみた。
結果下の様にカスタマイズする事ができた。
実際に定義したスタイルシートを以下に示します。はてなブックマークウィジェットのデザインをカスタマイズする場合に参考にしてください。
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;}