はてなブックマーク人気記事ブログパーツのデザイン変更

ブログのサイドバーに、はてなブックマーク人気記事のブログパーツを掲載しました。それで、デフォルトのウィジェットのデザインがちょっと当ブログのデザインに合わない感じだったのでカスタマイズしたのですが、意外に苦労しましたのでシェアしておきます。

スポンサーリンク

以下のように、当ブログのデザインに合わせるようにカスタマイズしました。

hatebu-popular
デザインは得意じゃないのですが、案外上手くいったかなーと思います。

人気の記事ブログパーツを設定

はてなブックマークブログパーツ

まずは上記リンクの「ブログのサイドバーに人気の記事を表示」から、ブログパーツの設定に進みます。ブログURLを入力して進み、ブログパーツの設定を行います。

Screen Shot 2014-11-07 at 21.49.00

CSSのカスタマイズを行う場合は、テーマ「なし」を選択しておく。他の項目は任意で。この設定でブログ・パーツ用のコードを取得して、表示させる箇所にペーストします。私の場合は WordPress ですので、サイドバー用のテーマに貼りつけました。

ブログパーツ用のCSSを設定

続いて、CSS(スタイルシート)の設定です。以下のようにカスタマイズを行いました。

CSSの設定は以下のページがとても分かりやすかったです、感謝。

はてなブログにはてなブックマークウィジェットを設置/カスタマイズする方法 – マトリョーシカ的日常

以上で、現在右サイドバーに表示されている通り、人気記事ブログパーツのデザインをカスタマイズできました!

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!