読者です 読者をやめる 読者になる 読者になる

NO TITLE

WEBデザインとかブログ運営、社会・経済、音楽などなど

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

スポンサードリンク

f:id:shiromatakumi:20160831205809p:plain

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

「読者になる」ボタンが見つからないブログってたまにないですか?どっかにボタンがあるんでしょうけど、中々見つからないことがあります。

 これです↓↓

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

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

f:id:shiromatakumi:20151218155558j:plain

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

 

f:id:shiromatakumi:20151218155720j:plain

詳細設定の下の方にあるコードをコピーします。これを、記事の中に挿入すれば記事中に読者登録ボタンを設置することができます。HTML編集で貼り付けてくださいね。

 ↑↑こんな感じ

記事中だけでなく、

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

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

 

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

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

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

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

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

私は記事下にこのような「読者になる」ボタンを設置しました。

やたらデカイでしょww 

当ブログの記事下にある「読者になる」ボタンは、マウスがのるとボタンが凹むようになってます。

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

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

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

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

 

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

CSSで立体感を出しています。

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

www.color-sample.com

せっかく読者登録しようと思ったのに、ボタンが見当たらないので諦めてしまう人もいるかもしれません。この機会損失はとてももったいない。しっかり目立つようにボタンを設置してみましょう。

 

はてなブログのカスタマイズはこちらでまとめています。

必見!はてなブログのカスタマイズを一気に紹介する

 

他にもCSSではてなブログをカスタマイズする方法も書いてます。