No Name

元「NO TITLE」

はてなブログの読者登録ボタンの設置やカスタマイズ

この記事をシェアする

f:id:shiromatakumi:20190221180451p:plain

「読者になる」ボタンが見つからないブログってたまにないですか?

どっかにボタンがあるんでしょうけど、中々見つからないことがあります。

 これです↓↓

実は読者登録ボタンは増やしたり好きなところに設置することができます。今回は、読者登録ボタンの増設の仕方について説明していきます。

記事後半ではオリジナルの読者登録ボタンの作り方も紹介します。

読者登録ボタンを増やしてみよう

以下の手順で「読者になる」ボタンのコードが入手できます。

f:id:shiromatakumi:20190221172933p:plain

ダッシュボード→設定→詳細設定に進みます

f:id:shiromatakumi:20190221172950p:plain

詳細設定の下の方にある「読者になるボタン」のコードをコピーしてください。

これを、記事の中に挿入すれば記事中に読者登録ボタンを設置することができます。HTML編集で貼り付けてくださいね。

記事中だけでなく、

ダッシュボード→デザイン→カスタマイズ→記事→記事上下カスタマイズ

で、記事の上下に表示させることもできます。記事上下のカスタマイズをしておけば、記事を書くたびにボタンを設置する手間が省けます。

読者になるページへ飛ぶリンクを貼る方法

もう一つ方法があって、「読者になる」ページにリンクを貼る方法。以下のリンクは「読者になる」ページのURLです。クリックしてみると、「読者になる」ページに飛びます。

https://blog.hatena.ne.jp/shiromatakumi/shiromatakumi.hatenablog.com/subscribe

https://blog.hatena.ne.jp/あなたのID/ブログのURL/subscribe

上記が「読者になる」ページのURLです。このリンクに飛ぶようにコードを書けば、簡単に「読者になる」ボタンを作ることができます。

試しにこのような読者登録ボタンを作ってみました。

この「読者になる」ボタンは、マウスがのるとボタンが凹むようになってます。

ソースコード

一応ソースコードのせます。

まず、以下のHTMLコードを記事下や記事上あたりにコピペしてください。

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

まずはHTML。こっちは単純にdiv要素のなかにa要素でリンクを貼っているだけです。ブログのURLは、「http://」以降のURLです。

 

次に、カスタムCSSに以下のコードをコピペしてください。 

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

CSSの方は少し工夫してます。マウスを載せると、少し位置が変わってボタンが押されているような動きにしました。

box-shadowで立体感を出しています。

↓↓このカラーコードを参考に、自分の好きな色に変えてみて下さい。

www.color-sample.com

せっかく読者登録しようと思ったのに、ボタンが見当たらないので諦めてしまう人もいるかもしれません。

この機会損失はとてももったいない。しっかり目立つようにボタンを設置してみましょう。