はてなブログに関連記事や人気エントリーを表示させるブログパーツです。
一般的に「あわせて読みたい」というフレーズと一緒に表示されています。

• 特徴
• 利用方法
  • 表示用コードをはてなブログに貼り付ける
  • 各種の設定
  • 描画用コードをはてなブログに貼り付ける
• スクリーンショット
• 諸注意など

特徴

• はてなブログ(無料版)、Proのどちらでも利用可能です。
• PC／スマートフォン版のどちらでも動作します。
• 記事上、記事下、サイドバーといったHTMLを挿入できる場所であれば、何処に置いても表示する事ができます。
• リストの表示数やデフォルトのリストを指定する事ができます。*1
• 複数のリストを1つのページ内で表示できます。
• リストに表示されなかった記事をランダムに再表示させるボタンや、詳しい一覧表示へのリンクボタン、RSSの購読ボタンが利用でき、不要なボタンを非表示にすることもできます。
• CSSの知識があれば、柔軟なカスタマイズが可能です。
• (上級者向け 実験中) 設置の効果を確認できる　Google Analyticsの「キャンペーンパラメータ」やトラッキング用のURLタグを追加する事ができます。
• GoogleAPI等の外部APIを利用しない設計の為、外部要因によるトラブルの少ない運用が可能です。*2

利用方法

表示用コードと描画用コードをそれぞれ貼り付けます。

表示用コードをはてなブログに貼り付ける

表示させたい場所に、設定を含めた「表示用コード」を貼り付けます。

一例として、以下のようなコードになります。 

<!-- 設定が含まれた表示用コード -->
<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Popular"
	 data-title="タイトル"
	 data-more-btn="true"
	 data-subscribe-btn="true">
</div>

設定は

data- (設定用キー) =" (値) "

という書式になります。値は " " を利用して囲みます。

 data-count="3" data-mode="Popular"

設定と設定の間には、半角のスペースを1つ以上挿入します。

全ての設定は

<div class="js-htnpsne-awasete-module"
	 
	 (この部分に設定が入ります)
	 
	>
</div>

DIVタグの中に含まれます。閉じるタグ等を間違えて消去しないように設定します。

各種の設定

現在、設定できる項目は以下のとおりです。

data-count="3"

リストの表示個数です。1以上の整数が入ります。表示個数よりデータが多い場合は、ランダムに表示されます。

data-mode="Popular"

表示させるリストの種類です。

• はてなブックマークの人気順を表示させる「Popular」
• 最近の記事を表示させる「Recent」
• 記事のカテゴリーから表示させる「Category」

の3つから選択します。

data-title="タイトル"

リストのタイトルです。

data-more-btn="true"

リストに表示されなかった一覧を表示させるボタンの表示／非表示を設定できます。
「true」に設定するとボタンが表示されます。

data-subscribe-btn="true"

現在選択されいるリストのRSSをfeedlyに登録するボタンの表示／非表示を設定できます。
「true」に設定するとボタンが表示されます。

data-user-css="true"

カスタマイズ用のCSSを利用する設定です。あらかじめ用意されたCSSを利用せず、カスタマイズした表示にしたい場合はtrueにします。

data-track-parameters="#test"

(上級者向け 実験中) 表示させたリストのURLに付与する追加パラメータを設定できます。

※設定方法などは予告なく変更・無効化されることがあります。

カスタマイズされた表示用コードの例となります。

<!-- 設定が含まれた表示用コード -->
<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Popular"
	 data-title="タイトル"
	 data-more-btn="true"
	 data-subscribe-btn="true"
	 data-user-css="true"
	 data-track-parameters="#test">
</div>

描画用コードをはてなブログに貼り付ける

すべての表示させたい場所に表示用コードを貼り付けたら、描画用コードを貼り付けます。

描画用コードは1か所貼り付けるだけで動作します。

遅延読み込みを行う設定が含まれています。
スマートフォンでも表示させる場合は、ブログの詳細設定→ headに要素を追加 へ貼り付けます。

<!-- 描画用コード -->
<script src="//niyari.github.io/hatenablog-modules/also-read.min.js" charset="utf-8" async></script>

スクリーンショット

全ての設定が完了すると、以下のように表示されます。

どうぞご利用ください。

諸注意など

ブログのデザインや追加されているブログパーツの相性により、表示が崩れる場合があります。該当するブログパーツの設定変更やCSSのカスタマイズが必要になることがります。

そのほかの機能もどうぞご利用ください。

psn.hatenablog.jp