はてなブックマークウィジェットのデザインをはてなブログに合わせてみた

最近、ちょこちょこはてなブックマークを頂けるようになったので、ブログにはてなブックマークのランキングを表示してみることに。

簡単なのは皆使っているウィジェットを使うことだろうなー、と思って検索。

ブログパーツの設定

↑こういうのが設置出来ます。

これをサイドバーに設置するだけなら簡単。

ブログの管理画面から「デザイン」＞「カスタマイズ」＞「サイドバー」＞「モジュールを追加」＞「HTML」と進み、入力欄に先ほどのウィジェットのページで用意されたコードをコピペするだけです。

ただ、デフォルトのはてなブックマークウィジェットのデザインはちょっと派手なので好きになれない。

そこでほんの少しカスタマイズすることに。

まずは、先ほど貼り付けたはてなブックマークウィジェットのコードの中をちょっと書き換えます。

デフォルトのテーマを無効にするために、"default"の部分を"notheme"に。

あとついでに、タイトルの文言を"エントリー"から"人気記事"に変更します。

これでウィジェットのテーマをなくしたので、ブログデフォルトのテーマに合わせた感じになるかな？と思ったのですが、あまりにスッキリしすぎています。

そこで、ブログのCSSをちょっといじって、少しだけ目立たせることに。

ブログのCSSを弄りたいときは、管理画面から「デザイン」＞「カスタマイズ」＞「デザインCSS」と進めばOK。

ここに変更したいCSSを書き込むだけ。

はてなブックマークウィジェットのクラスの定義などは以下のサイトで調べてくれていました。

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

上記サイトが用意してくれたCSSの見本に合わせて、自分が変更したい場所だけを抜粋してみます。

今回自分が弄りたいのは、

・ブックマーク数のフォント変更
・タイトルのフォント変更

だったので、以下のように書きました。

/*はてブウィジェット*/
/*リストのブックマーク数部分のリンクの定義*/ 
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;}

/*フッターとヘッダーのリンクの定義1*/
div.hatena-bookmark-widget-title a{ 
    text-align: left;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 5px;
    padding-bottom: 3px;
    color: #454545;
}

ブックマーク数は単純にテキストを赤く指定しているだけです。

タイトルの方はサイドバーの他の項目と合わせたかったので、今のブログに当たっているCSSの内容を調べてきてコピペしました。

こんな感じで↓

これでブログのデザインに馴染みつつ、赤字でちょっとだけ目立たせることができました。

仕事の合間にちょこっと触っただけにしては満足。

あと改善点としては、ホントはタイトルの前にある「B」のアイコンを消したいことですかね。

これはやりかたがわかりませんでした。

どなたか、わかればぜひ教えて下さい。

※追記※
タイトルのBアイコンは

.hatena-bookmark-widget-title img { display:none; }

で消せることが判明。

言われてみりゃ、そりゃそうか。

ガチャピン日記DS