ブログにはてなブックマークランキングを表示する方法

このエントリーをはてなブックマークに追加
Pocket

ブロガーにとってまだまだ貴重な存在であるはてなブックマーク。はてなブックマークでは自分のサイトのブックマークランキングや新着ランキングを作れるブログパーツが配布されています。

先日このブログでも導入したので、方法をまとめておきたいと思います。と言っても難しいとろこはないのでサクッとやってしまいましょう。

ブログにはてぶウィジェットを設置する方法

はてなでブログパーツを作成する

ブログパーツをダウンロードするには、はてなの公式ページで自分用のパーツを作る必要があります。
はてなのブログパーツを設置してみよう

公式サイトに移動したら、下の方にある「ブログのサイドバーにある人気記事を表示」のブログパーツを作成ボタンを押します。
はてぶのブログパーツを作ってみる

その次のページでURLを入力する項目があるので、自分のブログのURLを入力します。このとき入力するのは、トップページのURLなので注意。入力したら送信ボタンを押します。
hatena-blog-parts3

送信ボタンを押すと、パーツの細かな設定ページへ移動します。ここではパーツのタイトルや種類（人気か新着か）、ブログパーツの幅、表示数、テーマを設定できます。ここではランキングを表示したいので、種類のところで人気ランキングを選択します。
はてなブックマークのブログパーツの設定方法

はてなのブログパーツをサイトに貼付けてみる

ブログパーツの作成ができたらあとはページに貼付けるだけ。作成ページの下にあるコードをコピーしてページのサイドバーなどに貼付けましょう。
はてなブックマークのブログパーツを貼付ける方法

WordPressなら、sidebar.phpに貼付けます。そのまま貼付けてもいいのですが、このサイトではタグで囲ってその中に入れておきました。

<aside class="hatena-popular-post">
  
  <!-- ここに貼付け -->

</aside>

はてなブックマークのブログパーツをフラットデザイン化！

ここまでで一応設置は完了しました。ブログにもきちんとはてなブックマークのランキングが表示されるようになっていると思います。

ただ、デザインをもう少し変えてみたいという気がしたので、このブログではフラットデザイン化を行っています。
はてなブックマークのブログパーツをフラットデザイン化

HTMLやclass名などは自動的に出力されるため変更できません。なのでCSSのみでデザインをカスタマイズすることになります。CSSコードはこんな感じ。

style.css

.hatena-bookmark-widget {
  font-size:13px;
  width:auto;
}

.hatena-bookmark-widget .hatena-bookmark-widget-title {
  text-align:center;
  padding-left:0;
  margin-right:0;
  border-bottom:3px solid #2e60b6;
  font-weight:700;
  background:none;
  background-color:#5279e7;
}

.hatena-bookmark-widget .hatena-bookmark-widget-title a {
  margin-right:0;
  background:none;
  padding:12px;
}

.hatena-bookmark-widget ul {
  line-height:16px;
  background:#fff;
}

.hatena-bookmark-widget ul li {
  font-size:100%;
  height:auto;
  padding:10px 15px;
}

.hatena-bookmark-widget ul li .hatena-bookmark-entrytitle {
  height:auto;
}

こんな感じで簡単にはてなブックマークのランキングを設置することができるので、みなさんも挑戦してみてください。