ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

すべての記事の一番下(スターの上)にカスタマイズ可能な読者になるボタンを設置する方法

デザイン設定画面の記事下に読者になるボタンを設置すると読者になるボタンの場所がやや見づらいです。そこで以下の画像のように、すべての記事の真下に「読者になる」ボタンを設置する方法を紹介します。

f:id:xhateblo:20190205132342p:plain
「読者になる」ボタン

結論から言うと、詳細設定画面のhead二要素を追加の部分にJavaScriptを追加し、すべての記事の本文要素の末尾に読者になるボタンをJavaScriptをつかって挿入しています。

実際のコードは次の画像をご覧ください。

document.addEventListener("DOMContentLoaded", function(event) {
  var reader_button = document.createElement("a");
  reader_button.setAttribute('id','reader_button-wrap');
  //sstylesheetを書くか以下のようにスタイル要素を追加して見た目を定義します。
  //例えば背景色を変える場合はbackground-color:FF9999をbackground-color:[任意のカラーコード] に変更してください。
  reader_button.setAttribute('style', 'text-align:center;background-color:#FF9999; color:#FFFFFF!important;box-shadow:5px 5px 5px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin:15px 20%;display:block ');
  reader_button.setAttribute('href','https://blog.hatena.ne.jp/your hatena  id/your blog url/subscribe')
  reader_button.innerHTML='読者になる'
  document.getElementsByClassName('entry-content')[0].appendChild(reader_button)

コードを説明すると、createElementでDOM要素をつくり、setAttribute()で属性を付与し、最後にappendChild()でentry-contentで取得される(最初の)要素の最後につくったDOM要素を挿入しています。

筆者の場合 your hatena id はxhateblo、your blog url はxhateblo.hatenablog.comです。ブラウザのhttps~.hatenablog.comと表示されている部分にある自分のブログのURL+/subscribeと覚えればいいでしょう。