ブログとSNSを連携させている方多いですね！
そこで、今回はブログを読んでくれた方にフォローしてもらうべく「フォローボタン」をカスタマイズして設置しました。
はてなブログでは、プロフィール欄で読者登録やTwitterのフォローボタンは設置できますが他のSNSは未対応。
HTMLやCSSを利用してフォローボタンを作成したい方は参考になると思います。
HTMLとCSSでフォローボタンを設置
カスタムするきっかけとなったのは"Pinterest"
はてなブログでも独自でSNS連携をしている方が多い中、Pinterestのフォローボタンは意外と見かけないですよね？
そんな悩みを解決してくれる記事を発見！
さっそく参考にさせていただきカスタマイズしてみましたので紹介します。
フジグチさん、ありがとうございます！
▽フジグチさんの【フジブロっ！】▽
はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】※追記あり - フジブロっ！ (fuji-blo.com)
Font Awesomeを読み込む
Pinterestを設置するには「Font Awesome」を読み込む必要があるそう。
【ダッシュボード】＞【設定】＞【詳細設定】＞「headに要素を追加」にコードを貼り付けますが、既に記述済みの場合は必要ありません。
【※注意点】
わたしの場合、Font Awesome4から5にコードを張り付けた後に他のアイコンが表示されないエラーが発生しました。
他のアイコンを再設定することで修復できましたが、既にFont Awesomeを記述している方はご注意ください。
ボタン設置するHTMLを設定
Font Awesomeを設定したあと、ボタン設置するHTMLを設定します。
設定できるのは、はてなブログの読者登録、Twitter、Instagram、Feedly、Pinterestとなりますが、不要なフォローボタンは<li>～</li>まで削除してください。
わたしはプロフィール欄の自己紹介に設置しました。
【デザイン設定】＞【サイドバー】＞【プロフィール】＞「自己紹介」に貼り付け
【※注意点】
- コード内にサイトURLやid名、アカウント名の記述が必要
- 正しく入力しないと正常にフォローすることが出来ない
- 作業完了後にフォロー画面に進むか確認してください
最近入力フォームを作成されたようです。
入力フォームに必要事項を入力するとコードに反映されるのでご利用ください。
フォローボタンのCSSを設定
HTMLを設定したら最後にCSS設定です。
フォローボタンのデザインを選び、それに対応したCSSをコピーしてデザインCSSに入れてください。
【デザイン設定】＞【デザインCSS】＞コード貼り付け
デザインは丸、角丸、正方形のカラー版とモノクロ版が用意されていますが、角丸と正方形の場合は「border-radius: 50%」となっている部分の数値を調整する必要があります。
フォローボタン完成！
プロフィール欄の下にフォローボタンを追加
紹介文の順番どおりに読者登録、Twitter、Instagram、Pinterestと並んだのが嬉しい！
いかがだったでしょうか。
フォローボタンを分かりやすく設置することで、ブログだけでなくSNSでも繋がりが増えるとありがたいですね！
今のところまだ効果は感じられませんが。。。
設置したあとに気付いた話
通常、はてなブログの読者登録ボタンは読者数が表示されています。
実はボタン設置したことで読者数が表示されず、はてなブログ利用者からすれば"どのくらい読者がいるのか分からず"逆にフォローしづらくなってないか少し不安になりました。
読者数って大事だと思いませんか？
なので、今は読者登録だけ残したまま（笑）
フォローボタンの設置場所は多く、プロフィール欄、記事内、記事上、記事下など選択肢はさまざま。
でも、スマホ利用が多いことを考えると、記事内に埋め込むのが一番見られるしフォローされやすそうですね！
記事下やプロフィール欄だと広告等と一緒にスルーされそう。
SNSは友達限定や関係者間のみ利用されている人もいますが、オープンなアカウントがあると便利です。一度SNSからの流入も考えてみることをオススメします！
記事を最後まで読んで頂いて、本当に有難うございます！
最後に一つお願いです。
当ブログ「にせもんのホンモノ」はブログランキングに参加しております。
少しでも面白い・参考になったと感じたら、バナーをクリックしてブログランキング上位になる応援をしていただけないでしょうか？
アナタのクリックが励みになります！
人気ブログランキング
また次の記事で会いましょう！
