WordPressのサイドバーに「はてなブックマークブログパーツ」を設定する方法

Wordpress

こんにちは。とみっちです。

最近、HTMLやWordPressに関するマンツーマンレッスンを再開して、本日は池袋の喫茶店へ行ってきました！

今月はあと数人に予約を頂いています。

実はレッスンの度に、どんな人とお会いできるかな〜とちょっと緊張しながらも楽しみにしています。

レッスン時に色々な会話をしていると自分自身がためになることも多く、刺激になるのがたまりません。

フリーランスは孤独との戦い！

人と会う機会が貴重です。
 

さあ、いつもの口調に戻るとしよう。

今回はWordPressのサイドバーに「はてなブックマークブログパーツ」を設定する方法を紹介するよ！

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

当ブログをPCで閲覧した際、右サイドメニューに「人気記事」という欄を表示している。

ここは現在、はてなブックマークのブログパーツを表示するようにしている。

どうやって表示させるかなんだけれど、はてなブックマークのブログパーツの設定からブログパーツ用のタグを取得する。

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

ブログパーツの設定画面へとアクセスしたら、プラグインを設置するブログのURL(トップページ)を入力して「送信」ボタンをクリック。

続いて各項目を設定しよう。

URLブログパーツを設置するサイトのURL
タイトルブログのサイドバーで表示するテキストとなるので、ここに入力して「プレビュー」をクリック。
幅後で変更するのでとりあえず「デフォルト」でOK
表示するエントリー数1〜10までの間で設定できる。記事が沢山はてブが付いている人は多めに設定してもいいだろう。
テーマ自分でスタイルを調整した方が良いので「なし」を選択

そうすると、自分のブログに設置するためのタグが発行される。

タグの中身を見てもらえれば、後からでも結構書き換えが可能なことに気づくw


<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   = "http://example.com/";
Hatena.BookmarkWidget.title = "人気記事";
Hatena.BookmarkWidget.sort  = "hot";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 5;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>

Hatena.BookmarkWidget.xxx = “xxx“;

“xxx“となっている部分を以下のように書き換えて設定することも可能。

Hatena.BookmarkWidget.title = “人気記事“;
Hatena.BookmarkWidget.width = 312;

※ =「イコール」の右側の値は、日本語はダブルクォーテーション「”」が必要、数値の場合は不要。
「312」は312pxです。

一度タグを発行すれば、設定はここの値を変更するだけでも問題なさそう。

設定に自信が無い人は、このブログパーツ発行画面から再度設定を変更してタグを発行しよう。

自分のブログにタグを貼り付ける

自分のブログで、ブログパーツを表示したい箇所にタグを貼り付けよう。

サイドバーの場合は、例えば「sidebar.php」とか、サイドバーを表示している箇所を探し出して貼り付ける。

僕は、WordPressのテーマはストーク(STORK)を使っているよ。

WordPressテーマ
「ストーク」

貼り付けたHTMLの例


<div class="hatena-sidebar">
  <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   = "http://example.com/";
  Hatena.BookmarkWidget.title = "人気記事";
  Hatena.BookmarkWidget.sort  = "count";
  Hatena.BookmarkWidget.width = 312;
  Hatena.BookmarkWidget.num   = 5;
  Hatena.BookmarkWidget.theme = "hatenadiary";
  Hatena.BookmarkWidget.load();
  </script>
</div><!-- /.hatena-sidebar -->

※ここでは「Hatena.BookmarkWidget.url」はサンプルURLで、その他もとりあえず適当なものです。

CSSカスタム

「font-awesome」使っている場合の例。

font-awesomeを使わない場合は適宜矢印の画像を使うか、矢印なしとかお好きなようにしてくださいな。


/* はてなブックマーク ブログパーツ */
.hatena-sidebar,
.hatena-bookmark.hatena-module {
  width: 100% !important;
}
.hatena-moduletitle {
  background: #555;
  margin-bottom: 0.75em;
}
.hatena-moduletitle a {
  color: #fff;
  display: block;
  font-weight: bold;
  height: 100%;
  padding: .75em .8em;
  width: 100%;
}
.hatena-modulebody li {
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  margin: 0;
  min-height: 65px;
  padding: 0.7em 1.2em 0.5em 0.3em;
  position: relative;
}
.hatena-modulebody li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.hatena-modulebody li .hatena-bookmark-count {
  font-size: 12px;
  margin-left: 5px;
}
.hatena-modulebody li:after {
  color: #0165c8;
  content: '\f054';
  font-family: "fontawesome";
  font-size: 1em;
  margin-top: -0.5em;
  position: absolute;
  right: 0.2em;
  top: 50%;
  z-index: 100;
}
.hatena-modulebody li:hover:after {
  right: 0;
}

使っているテーマに合わせて微調整が必要です。

というわけで、今回はWordPressのサイドバーなどに「はてなブックマークブログパーツ」を設置する紹介でした！

タイトルとURLをコピーしました