この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいという方は、コピペしていただければと思います。
ちなみに、このSNSのフォローボタンを作るに当って、参考にさせていただいたのが、こちらの『副業ハック』さんの記事。とってもわかりたすくて参考になりました。ありがとうございます。今回は、この『副業ハック』さんで紹介されていたコードを、ちょっとだけいじらせていただきました。
流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック
今回設置したのは、こんな感じのSNSボタン!
まずは、どんか感じのSNSボタンか見てもらった方がいいと思いますので、SNSボタンを設置したブログ画像を貼らせていただきました。PC表示の場合は、サイドバーに、スマホ表示の場合は、フッターにそれぞれ設置しました。
PCでの表示
スマホでの表示
ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンですのでお間違えなく!それでは、さっそく設置方法を解説していきます。
SNSフォローボタンの設置方法
設置方法と言っても、コピペするだけでOKなので、とっても簡単です。まずは、PC表示の方から設置していきたいと思います。それでは、はてなブログのダッシュボードから『デザイン→カスタマイズ→サイドバー→モジュールを追加』に進んでください。
そしたら、『HTML』を選択して、以下のコードを貼り付けてください。
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/SikisimaHisayuki/20150828/20150828173128.png?1440750700" alt="はてなブログ snsボタン" class="hatena-fotolife-disable" itemprop="image"></span></p> <div class="snsshare2"> <a id="share_fb" href="URL">Facebook</a> <a id="share_tw" href="URL">Twitter</a> <a id="share_hatena" href="http://blog.hatena.ne.jp/はてなのID/ブログURL/subscribe">Hatena!で購読</a> <a id="share_feedly" href="URL">feedlyで購読</a> <a id="share_instagram" href="URL">Instagram</a> <a id="share_google" href="URL">Google+</a> </div>
そして、『URL』というところに、ご自分の各種SNSのプロフィールページなどのURLをコピペすればOKです。ここで、一番わかりずらいのが、はてなブログの『読者になる』ボタンです。以下の感じで設定してみてください。
ちなみに当ブログの『読者になる』ボタンの設定はこうなります。
<a id="share_hatena" href="http://blog.hatena.ne.jp/SikisimaHisayuki/wepli-dot2.hatenablog.com/subscribe">Hatena!で購読</a>
CSSの設定
続いてCSSの設定です。以下のコードをダッシュボードから、『デザインCSS』に進んで、お好みの場所に貼り付ければ終了です。もしかしたら、はてなブログのテーマによって、デザインが崩れる場合は、CSSをいじってみてください。
/* snsボタン */ /* 全般設定 */ .snsshare2 { width: 100%; height: 180px; margin-bottom: 10px; } .snsshare2 a { width: 49%; height: 25px; margin-bottom: 10px; padding: 14px 0; float: left; font-size: 1.13em; /* 18px */ font-weight: bold; color: #ffffff; text-align: center; letter-spacing: 0.1em; display: inline-block; text-decoration: none; } .snsshare2 a:hover { color: #ffffff; text-decoration: underline; } /* facebook設定 */ .snsshare2 a#share_fb { background-color: #3B5998; border-bottom: 1px solid #3C5A98; margin-right: 2%; } /* Twitter設定 */ .snsshare2 a#share_tw { background-color: #00ACEE; border-bottom: 1px solid #0193CB; } /* hatena!設定 */ .snsshare2 a#share_hatena { background-color: #008FDE; border-bottom: 1px solid #007BBF; margin-right: 2%; } /* feedly設定 */ .snsshare2 a#share_feedly { background-color: #70CA3B; border-bottom: 1px solid #69A205; }
スマホにSNSフォローボタンを設置する
スマホへの設置方法は、先ほど『モジュールに追加』から追加したHTMLコードを、ダッシュボードから『フッタ→ページャー下』にコピペして、CSSも上のコードと同じものをコピペすれば完成です。
さいごに
『副業ハック』さんのわかりやすい記事のおかげで、簡単にSNSのフォローボタンを作成することができました。ちなみに、僕が『副業ハック』さんのコードをちょっといじって変更したところは、以下の通りです。
- シェアボタンではなくフォローボタンにした
- SNSボタンの間に余白を入れた
- Instagramとはてなの読者登録ボタンを入れた
- ボタンのテキストを変更したり、サイズをemにした
以上4点(※だったと思います)を変更しました。皆さんのはてなブログカスタマイズの参考になればと思います。記事にさせていただきました。
おわり。
※ 当ブログのはてなブログカスタマイズの過去記事です。もしよろしければ、のぞいてみてください。