mainvisual
※ 2016/7/06 編集:
  • 文章がの構造がおかしかったので、校正しました

ブログを上位ランキングさせるために必要なツール言っても過言ではなくなった、 「はてなブックマーク」。

はてなブックマークをされると、 google検索エンジンの順位で高い影響力を持つ「被リンク数」を稼ぐ事ができ、 それにより、ブックマークされた記事が上位に表示されやすくなります。

でも、公式で提供されているブログパーツは幅が固定されてしまって、使いづらい… なので、いっそのこと、幅がぴったりに合うようにCSSでカスタマイズしました。

まずは通常の設置方法を見ていきましょう!

注意

以下の点について、ご了承下さい。

  • この記事ではhttpを用いて、設置を行っています。httpsは非対応となります。
  • httpsをつかって、Hatena Bookmarkを設置したい場合は、 https対応のプロキシを立てる必要があります。(Hatenaさんが公式に認めているわけではない)

公式で提供されているツールを使っての設置方法

Hatenaでは、「ブログパーツを設置してみましょう」 のページから、いろいろなブログパーツを設置できるように提供されています。(Hatenaさん、ありがとう御座います。)

このページの一番下のボタンから、Hatenaブクマランキングブログパーツの作成が出来ます。

次にすべきこともとても簡単

  1. 「URL」「タイトル」などを設定します。
  2. プレビューで確認します。
  3. ブログで表示したい場所に貼り付けます。

それだけです。

自分のサイトに設置してみた結果…

うーん…いかにもサイトにマッチしていません!

どうにかしたい!

目標

既存のスクリプトではパーツのデザインがこんな感じです。

幅が200px固定で、ノンレスポンシブのブログパーツです。 これをどうにかして、CSSで幅を100%に指定する方法を見つけ出し、スタイルを整えたい!

どうにかして100%指定出来る方法を探す

きっかけとなったのは、このサイトでした。

Hatena.BookmarkWidget.theme = "default";の記述のおかげでで察しはあったのですが、 このデザインはテーマの1つであることがわかりました。

この他にnothemeという名前のテーマがあります。 名前から察することが出来るように一切スタイルがありません。 HTMLを生成するだけのスクリプトにすることが出来ます。

そこで、今回はこれを使って幅100%のウィジットを作ることにします。

何はともあれ、作ってみよう!

JavascriptとCSSのソースコードはこんな感じになりました

<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "<自分のブログのURL(http://...)>";
Hatena.BookmarkWidget.title = "人気記事ランキング";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 5;
Hatena.BookmarkWidget.theme = "notheme";
Hatena.BookmarkWidget.load();
</script>

一応、オプションの解説を…

オプション名 解説
Hatena.BookmarkWidget.url 自分のブログのURL (http://~~~)から記述
Hatena.BookmarkWidget.title Hatena Bookmarkウィジットのタイトル
Hatena.BookmarkWidget.sort ランキングの種類:
  • hot => 人気の記事一覧
  • count => ブックマークの多い順番
Hatena.BookmarkWidget.width ウィジットの幅(px). 0の場合は200pxになる。
Hatena.BookmarkWidget.theme ウィジットのテーマ: defaultnothemeotherbaseの4つがあるが、defaultothernothemebaseはスタイルが同じ。

CSSはこんな感じになりました。nothemeを使うと、 classにhatena-bookmark-widget-nothemeなどがあるので、 それを利用してスタイルを作りました。

.hatena-bookmark-widget-notheme {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-title {
  background: #5279E7;
  padding: 5px 0 5px 3px;
  border-radius: 4px 4px 0 0;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-title a {
  font-weight: bold;
  display: block;
  color: #FFF;
  margin-left: 8px;
  font-size: 90%;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-title img {
  margin-right: 8px;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f3f3f3;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body li {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  height: 4.5em;
  position: relative;
  background: none;
  font-size: 90%;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body li .hatena-bookmark-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  float: right;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-footer {
  text-align: center;
  padding: 3px;
  font-weight: bold;
  font-size: 90%;
  color: #5279E7;
  background: #f3f3f3;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-footer a {
  text-decoration: none;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-count a {
  text-decoration: underline;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-count em {
  vertical-align: bottom;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-count em a {
  background-color: #fff0f0;
  font-weight: bold;
  display: inline;
  font-style: normal;
  color: #ff6666;
}

まとめ

仕上がりは、こんなふうになりました。

見ているブラウザの幅を小さくすると、 それに合わせてHatena Bookmarkもサイズが変化します。

今回作ったスタイルはレスポンシブ対応なので、どんな機種でも対応出来ます!

ただし、このスクリプトはhttpsの環境では使用できない (httpsの環境からhttpのリソースは読み込めない…)ので、 次回はhttpsプロキシを立て、Javascriptをhttpsに対応させるといった内容を書こうと思います。

乞うご期待!

参考資料