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)を使っているよ。

貼り付けた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のサイドバーなどに「はてなブックマークブログパーツ」を設置する紹介でした!

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

WordPressの勉強につまづいたら、マンツーマンでプロから習うのがオススメ

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!

ワードプレスで自分のサイトを開発!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

初心者の方はもちろん更なるスキルアップを目指す方も、現場のクリエイターと実務経験を積むことで、WEB業界への就職や自宅でSOHOとして活躍する近道となります。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景