【第8回】ブログ作成記録（SNSボタン編）
こんにちは。わいのり研究所です。
今回は、SNSボタンを設置しましたので紹介します。
SNSボタンは、シェアボタンとフォローボタンの2種類です。
あと、このままだとフォローボタンが関連記事よりも下になってしまうので、関連記事がもっと下になるように設定します。
今回の内容
１．記事下にシェアボタンを設置
２．関連記事を記事下のもっと下に変更
３．読者になるボタンの幅を調整
４．サイドバーにフォローボタンを設置
ちなみに前回は「読者になるボタン」を設置しました。
１．記事下にフォローボタンを設置
サイト様紹介
こちらのサイト様にお世話になりました。
なお、はてなブックマークのカウントが取得できなかったので、こちらのサイト様を参考に下記のようにアドレスを変更しました。
https化の影響ということでしょうか？
はてなブックマーク数を取得するためのアドレスを変更
すると、なんということでしょう！
無事、カウントが表示されるようになりました。（拍手）
こんな感じです。（これは画像です。）
かわいくて気に入ってます♪
スマホにも同じように表示されます。
（私のブログテーマがレスポンシブ対応だからだと思います。）
２．関連記事を記事下のもっと下に変更
サイト様紹介
次に、こちらのサイト様を紹介します。
結果的にシェアボタンを上にできる
このカスタマイズは、関連記事をもっと下にすることで、結果的にシェアボタンを上にもってくることができるからです。
シェアボタンは記事の下近くにある方が押してもらいやすいようです。
こんな感じで関連記事を下にできました。（画像です。）
３．読者になるボタンの幅を調整
サイト様紹介
前回のサイト様です。再度紹介させていただきます。
というか、同じ「NO TITLE」様でしたね。
読者になるボタンの幅を調整
これは私のこだわりです。
今回のシェアボタンと並べると、こちらの読者ボタンの方が大きかったので、「width」の値を調整して幅を揃えました。
こんな感じになりました。（画像です。）
４．サイドバーにフォローボタンを設置
サイト様紹介
フォローボタンは、こちらのサイト様にお世話になりました。
このようにたくさん紹介してくださいっています。
ありがとうございます！（画像です。）
『はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜』より引用
サイドバー用1（背景付き）を使用
私は「６．サイドバー用1（背景付き）」を使わせていただきました。
こんな感じです。（画像です。）
スマホにも同じように表示されます。
（これも、私のブログテーマがレスポンシブ対応だからだと思います。）
私の場合は、はてな読者登録ボタン、Facebook、Twitter、Feedlyのボタンを表示しています。Instagramは使ってないのでボタンは削除してます。あと、Google+も表示すると5個になるのでバランスが悪くなると思い削除しました。
お世話になったみなさまへ
今回お世話になったサイトの皆様、ありがとうございました！
素敵なカスタマイズができました！
最後に
シェアボタンにカウントを表示したかったので嬉しいです。
フォローボタンもサイドバーに表示されているブログを拝見するとカッコよかったので憧れていました。
いつも思いますが、ご自身でCSSなどを書いてカスタマイズできる方々はすごいですね！尊敬します。私も勉強して自分で書けるようになりたいです。
それでは、このあたりで失礼します。
今回もお付き合いいただきまして、ありがとうございました。
