きゃめるくん

IT会社員×ブログ

きゃめるくん

<< PICK UP >>
ブログで稼ぐ!?本気で副業で稼ぎたい方へ徹底解説
普段のお買い物で現金キャッシュバック⁉monoka(モノカ)をレビュー
【動画編集】コスパ最強!失敗しないおすすめのノートパソコン3選
【超初心者向けへ解説】バイナリーオプションとFX、どっち始めるべき??
ノーリスクでできる副業3選【目指せ月3万円】
【動画編集】未経験の私がフリーランスを目指そうと決めた3つの理由

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

 

 

こんにちはこんばんは。

 

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

 

今やブログ、アフィサイトでアクセス、成果を伸ばし続けるためには、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、リンクを入力

 

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

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;
}

 

 

以上となります。

 

その他のカスタマイズ、デザインはこちらを参考にしてみてください。

www.yukihy.com