はてなブログに関連記事を記事下に表示させるのでR

はてなブログの記事の下に、関連記事が並んでいるとかっこいいのでR。サイドバーなら関連記事をモジュール追加ですぐにできるのでRが、記事下の場合は、デザインの記事下にコードを入れないといけないのでR。

そこで、これができる方法をしらべたのでR。

ここと、

ここと、

ここと,

ここと,

ここと,

まとめ的に、ここが検索で引っかかったのでR。

しかし、ランダムにしたい場合は①、③、④、⑤となるようでR。

そこで、①、②、③、④と試してみて、

①は残念ながら、当方はうまくいかなかったのでR。

②はうまくいったが、ランダムでなかったために残念だったのでR。①と②を合わせ技でしようかと思ったのでRが、③、④が要望を満たしているようなので、これを試したのでR。

ちなみに、③を試すと、できたのでR。

方法は、「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」に、

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みます。' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

を挿入するだけでできたのでR。ちなみにこのソースの詳しい説明は、ここを見てほしいのでR。ここには、「ソースコードは著作物です。」と書かれているように、池田仮名 (id:bulldra) さんのものでR。この方のおかげで「はてなブログに関連記事を記事下に表示させる(ランダムに)」が当方にもできたのでR。

ちなみに、④はぽけっとしすてむ (id:psne)さんのものでRが、これも同じように「カスタマイズ」→「記事下」に、

<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Category"
	 data-title="あわせて読みます。"
	 data-more-btn="true"
	 data-subscribe-btn="true">
</div>
<script src="//niyari.github.io/hatenablog-modules/also-read.min.js" charset="utf-8" async></script>

と挿入するだけでできたのでR。こっちはcssもカスタマイズできるようでR。

③、④ともgithub経由なので、この辺は①、②と違って見た目(挿入)のコードはシンプルなのでR。

⑤はこれから試してみるのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。





この記事をシェアできます。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』