こんにちはこんばんは。
今回は、はてなブログを利用している方へサイドバーにあるプロフィールにInstagram・Twitter・はてなブログのフォローボタンを設置する方法を紹介します。
今やブログ、アフィサイトでアクセス、成果を伸ばし続けるためには、SEO対策だけではなかなか難しく、SNSを活用した集客がとっても重要です。
実装図
完成のイメージ図はこんな感じ!3Dボタンにすることでお洒落に仕上がります。
はてなブログ・Twitter・Instagramの3つ横並び形式となります。
【コピペOK】実際にカスタマイズ
STEP.1~STEP.3で完結。
HTMLにコードを貼り付けて、自分のSNSリンク、IDに差し替えます。
あとは、デザインCSSへコードを貼り付けるだけで、設置が完了します。
STEP1.HTMLのコピペ
『デザイン』⇒『カスタマイズ』⇒『サイドバー』⇒『プロフィール』⇒『編集』⇒『HTMLモード』⇒以下をコピペ
※以下のコードを一部変更する必要があります。
<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/kyamerukun/www.kyamerukun.info/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=kyamerukun" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>
<a class="instagram" href="https://www.instagram.com/kyamerukun/?hl=ja" target="_blank"><i class="blogicon-instagram lg"></i><br><span class="text-small">instagram</span></a>
</div>
※上記コードをそのままコピペすると、私のSNSリンクが挿入されてるので私のアカウントへ飛ぶようになっています。以下のように変更する必要がります。
STEP.2 HTMLコードに各SNSのID、リンクを入力
入力して問題なく反映されると以下のように表示されます。
※クリックして各アカウントへ遷移することを確認してください。
STEP.3デザインCSSのコピペ
『デザイン』⇒『カスタマイズ』⇒『デザインCSS』⇒以下をコピペ
.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
position: relative;
width: 25%;
height: 45px;
line-height: 22px;
font-size: 14px;
text-align: center;
text-decoration: none;
border-radius: 5px;
color: #ffffff;
}
.follow-btn .hatena {
border: 2px solid #3D3F44;
background: #ffffff;
color: #3D3F44;
box-shadow: 0 3px 0 #3D3F44;
}
.follow-btn .twitter {
border: 2px solid #00ACEE;
background: #ffffff;
color: #00ACEE;
box-shadow: 0 3px 0 #00ACEE;
}
.follow-btn .instagram {
border: 2px solid #F50057;
background: #ffffff;
color: #F50057;
box-shadow: 0 3px 0 #F50057;
}
.follow-btn .hatena:hover {
top: 3px;
box-shadow: none;
}
.follow-btn .twitter:hover {
top: 3px;
box-shadow: none;
}
.follow-btn .instagram:hover {
top: 3px;
box-shadow: none;
}
.text-small{
font-size: 10px;
}
以上となります。
その他のカスタマイズ、デザインはこちらを参考にしてみてください。