【コピペでOK】はてなブログのサイドバー(プロフィール)にInstagramフォローボタンを設置する方法

こんにちはこんばんは。

今回は、はてなブログを利用している方へサイドバーにあるプロフィールにInstagram・Twitter・はてなブログのフォローボタンを設置する方法を紹介します。

今やブログ、アフィサイトでアクセス、成果を伸ばし続けるためには、SEO対策だけではなかなか難しく、SNSを活用した集客がとっても重要です。

実装図
【コピペOK】実際にカスタマイズ

実装図

完成のイメージ図はこんな感じ！３Dボタンにすることでお洒落に仕上がります。

はてなブログ・Twitter・Instagramの３つ横並び形式となります。

【コピペOK】実際にカスタマイズ

STEP.１～STEP.３で完結。

HTMLにコードを貼り付けて、自分のSNSリンク、IDに差し替えます。

あとは、デザインCSSへコードを貼り付けるだけで、設置が完了します。

STEP１.HTMLのコピペ

『デザイン』⇒『カスタマイズ』⇒『サイドバー』⇒『プロフィール』⇒『編集』⇒『HTMLモード』⇒以下をコピペ

※以下のコードを一部変更する必要があります。

<div class="follow-btn" >
フォローする 
<a class="hatena" href="http://blog.hatena.ne.jp/kyamerukun/www.kyamerukun.info/subscribe" target="_blank"> はてな</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=kyamerukun" target="_blank"> Twitter</a>
<a class="instagram" href="https://www.instagram.com/kyamerukun/?hl=ja" target="_blank"> instagram</a>
</div>

※上記コードをそのままコピペすると、私のSNSリンクが挿入されてるので私のアカウントへ飛ぶようになっています。以下のように変更する必要がります。

STEP.2 HTMLコードに各SNSのID、リンクを入力

◆各アカウントの入力方法◆

kyamerukun ⇒ 自分のはてなIDを入力

www.kyamerukun.info ⇒ 自分のサイトドメインを入力

kyamerukun ⇒ Twitteアカウントの@を除いた部分を入力

kyamerukun ⇒ Instagramの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;
}