wepli.2

うぇぷり どっと に

【コピペでOK】はてなブログのカスタマイズ!SNSフォローボタンを設置しました

SNSフォローボタン はてなブログ

この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいという方は、コピペしていただければと思います。

ちなみに、このSNSのフォローボタンを作るに当って、参考にさせていただいたのが、こちらの『副業ハック』さんの記事。とってもわかりたすくて参考になりました。ありがとうございます。今回は、この『副業ハック』さんで紹介されていたコードを、ちょっとだけいじらせていただきました。

流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック

今回設置したのは、こんな感じのSNSボタン!

まずは、どんか感じのSNSボタンか見てもらった方がいいと思いますので、SNSボタンを設置したブログ画像を貼らせていただきました。PC表示の場合は、サイドバーに、スマホ表示の場合は、フッターにそれぞれ設置しました。

PCでの表示

SNS フォローボタン

スマホでの表示

SNS フォローボタン スマホ

ちなみに今回設置したのは、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です。ここで、一番わかりずらいのが、はてなブログの『読者になる』ボタンです。以下の感じで設定してみてください。

blog.hatena.ne.jp/はてなのID/ブログURL/subscribe

ちなみに当ブログの『読者になる』ボタンの設定はこうなります。

<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のフォローボタンを作成することができました。ちなみに、僕が『副業ハック』さんのコードをちょっといじって変更したところは、以下の通りです。

  • シェアボタンではなくフォローボタンにした
  • SNSボタンの間に余白を入れた
  • Instagramとはてなの読者登録ボタンを入れた
  • ボタンのテキストを変更したり、サイズをemにした

以上4点(※だったと思います)を変更しました。皆さんのはてなブログカスタマイズの参考になればと思います。記事にさせていただきました。

おわり。

※ 当ブログのはてなブログカスタマイズの過去記事です。もしよろしければ、のぞいてみてください。

wepli-dot2.hatenablog.com

wepli-dot2.hatenablog.com

wepli-dot2.hatenablog.com