自分方位研究所

日々の活動記録

はてなブログ。「読者になるボタン」を記事下に設置

「読者になるボタン」は何処にあるのかという問い合わせをいただきました。
自分でもわかっておらず、記事ページに貼りついてなかったかな?と探してみてもありません。いつの間にか消えてしまったのか・・・と思っていたら、サイドバーのプロフィール写真の下にありました。もともと記事ページにはなかったのです。

そのようなわけで、投稿記事の下にも「読者になるボタン」を設置することにしました。

先ず、はてなブログの管理画面(ダッシュボード)から、 設定 > 詳細設定 と進みます。

f:id:k-emu:20220216212616j:plain

詳細設定を一番下までスクロールすると、「読者になるボタン」のコードがあるのでそれをコピーします。

f:id:k-emu:20220216212811j:plain

次に、コードの貼り付け先を開きます。
ダッシュボードの「デザイン」を選択。

f:id:k-emu:20220216214700j:plain

スパナマークを選択して、「記事」を選択。
「記事上下のカスタマイズ」>「記事下」を選択。

f:id:k-emu:20220216220215j:plain

入力用テキストボックスが開くので、先ほどコピーした「読者になるボタン」のコードを貼り付けます。

f:id:k-emu:20220216220429j:plain

貼り付けたら、「変更を保存する」をクリック。

f:id:k-emu:20220216220858j:plain

「設定を変更しました」が表示されます。

f:id:k-emu:20220216221035j:plain

確認してみると・・・

f:id:k-emu:20220216221447j:plain

「読者になるボタン」が貼り付きました。しかし、いくら記事下とはいえ、ボタンの位置が下過ぎます。それに、「コメントを書く」のリンク文字とくっついています。これではあんまり。

それで、少し目立たせるのと、「コメントを書く」との間を少し空けるようにしました。

先に記事下に貼り付けたコードに<p>タグを付けて間を空けます。
本来であればCSSにて調整するべきなのですが、大目に見てください。

<p>◆~~~~~~~◆</p>
「読者になるボタン」のコード
<p>◆~~~~~~~◆</p>
<p>  </p>

表示させるとこんな感じ。

f:id:k-emu:20220216222252j:plain

希望としては「関連記事」より上に表示させたいのですが、とりあえずこれでしのぎます。