【はてなブログ向け】記事の一番最後に表示する

記事の一番最後に何かを追加したいことってありませんか?

僕も記事の一番下に表示したいものがあり、方法を探したのですが全然見つかりませんでした…。

仕方ないから自分でやってみよう!と試したら意外とすぐにできたのでご紹介します!

筆者が行った作業について

今回は読者登録ボタンを追加しました

記事本文の一番下に読者登録をお願いするやつを表示しようと思いました。

最初は記事1つ1つに入れていったのですが、予想以上にめんどくさい!

設定でコード追加して自動で入るようにしよう!と思ったのです。

↓これを入れようと思いました。

この記事はここで終わりです!

記事を読んでいただきありがとうございました!

今後も定期的に記事を書いていきます。

はてなアカウントをお持ちの方はぜひ読者登録をお願いします。

失敗例:記事下にコードを追加

一番最初に下の画像の場所にコードを追加しました。

記事下に書いたら、記事の最後に表示されるんじゃないかな?

f:id:webrank:20181115201901p:plain
試しで記事下に追加してみた

失敗例:結果

記事下にコードを追加してサイトを確認してみました。

え、ここに表示されちゃうんだ…
ここじゃなくて本文の最後に入れたいんだよな…

f:id:webrank:20181115234635p:plain

成功例:コードを自作して追加

結局どこに入れても記事本文の最後に表示されませんでした。

そのため、下記コードを記事下に追加しました。

「//任意」の部分に書いた内容が全記事の最後に表示されます!

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > p:last');
$target.after($('.content-end'));
}, false);
// ]]></script>
<div class="content-end">
//任意
</div>

成功例:結果

その結果、本文の最後に差し込むことができました!

おぉ!ちゃんと本文の最後に追加された!

f:id:webrank:20181116004011p:plain

最後に

毎回記事の最後に絶対何かを書いておきたいときに役立ちます!

例えば、Amazonの商品リンクとかですかね!

これ以外にも一番最初のアイキャッチ画像の下に何かを入れるっていうのもやりたいです。

前に探したのですが、こちらも参考になる情報を見つけられませんでした。

もう少し探して見つからなかったら自分でやって記事にしておきます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です