読者です 読者をやめる 読者になる 読者になる

くうねるだす

信州大学4回生の自然派ブロガー。 おいしいものがすき。おさけも少々。

はてなブログをコピペ+αでカスタマイズ!おしゃれなSNSフォローボタンのつけ方

ブログ ブログ-カスタマイズ
シェアする!
【スポンサーリンク】

ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。

 

コピペ+αで完成だよ!

hatenablog-custamize-sns-follow-btn

 カスタマイズの参考にした記事

前から言ってますが、PCもいじれず自分で勉強する根性もない僕はスーパーマンたちの知恵に頼っております。

今回はこちらの記事を参考にさせて頂きました!

www.yukihy.com

ゆきひー(ftmaccho)さん、ありがとうございます。

 

ゆきひーさんのフォローボタン使ってる方めちゃくちゃ多いんですよ。ていうか、デフォルト以外はほぼほぼゆきひーさんのやつ。オソロシイ。もうめちゃくちゃお世話になりまくってます。

 

SNSフォローボタンの実装図

実装図が写真の赤で囲ったとこですねー

PCでの表示

f:id:kuunerudasu:20151219193652j:plain

 

スマホでの表示

*スマホのカスタマイズはpro加入前提です

f:id:kuunerudasu:20151219193514p:plain

 「は?ゆきひーと全然ちげえじゃん」って言われそうですが、ぼくはCSSちょこっと変えただけなんでコードの8割はゆきひーさんのヤツなわけです。

 

今回つけたのは

■はてなブログの読者ボタン

■twitterのフォローボタン

■Instagramのフォローボタン

 

特徴はこんな感じ。 

■カラフルで目立つ

■アイコン、デザインがおしゃれ

■読み込みが速い

 

ぼくはSNSのシェアボタン(スマホの写真に写ってるカラフルなヤツ)と統一感のあるデザインにしたくてこんな形に落ち着きました。

 

なんでFeedlyじゃなくてInstagramやねん

そうですよね、そう思いますよね。でもインスタすごいかんね?というか、最近ブロガーの間でインスタが流行ってるもん!

 

…とくに高知県民の間で!!!

Instagramを使うイケダハヤト氏

ほら、イケハヤさん(正確に言えば高知県民ではないのか?)だってブログにインスタがっつり貼ってるし

f:id:kuunerudasu:20151219203816p:plain

引用:http://www.ikedahayato.com/20151219/43438032.html

 

Instagramにハマっているらしい八木くん

師匠の八木くん(高知出身)もほら。

f:id:kuunerudasu:20151219204150p:plain

引用:http://www.jimpei.net/entry/instagram

 

ふたりとも食べ物の写真ばっかじゃねーか!

ブログで稼いで美味しいモノたくさん食べてんのか。けしからん。 ぼくも食べたい。がんばろ。

 

あと、ブロガーの方って結構写真のクオリティーとか気にしてデジカメで撮ったりするじゃん。それだったら、インスタやらない手はないでしょ!

しかも利用者数だってインスタのがツイッターより多いんだぜ(やぎろぐに書いてあった←)、さあこれを読んだ人はインスタとブログを連携させよう。今すぐ!

 

おし、言いたいことは言い切った!あとはコピペのコード貼り付けるんでサササーっといきます。

 

HTMLのコピペコード

れりごー!

PCはダッシュボード>デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。

スマホはダッシュボード>デザイン>スマートフォン>記事>記事下へ。

 

<!--フォローボタン-->

<div class="follow-btn" >
<a class="hatena" href="http://blog.hatena.ne.jp/kuunerudasu/kuunerudasu.hatenadiary.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/kuunerudasu/kuunerudasu.hatenadiary.jp/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> <span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=Sight50Sky" target="_blank"><i class="blogicon-twitter lg"></i> <span class="text-small">Twitter</span></a>
<a class="instagram" href="https://www.instagram.com/sight50sky/?ref=badge" onclick="window.open('https://www.instagram.com/sight50sky/?ref=badge', '', 'width=500,height=400'); return false;"><i class="blogicon-instagram lg"></i> <span class="text-small">Instagram</span></a>

</div>

 

コイツをそのまま貼って頂いても全然OKですが(ぼくのurlのままだけど)、変えたい方はコードの赤字部分をそれぞれ自分のSNSのurlに変更してください。

 

はてなの読者ボタンだけクセがあって、kuunerudasu/kuunerudasu.hatenadiary.jpのところですが「自分のはてなID/自分のブログのURLからhttp://を除いた部分」となるので注意!

 

CSSのコピペコード

お次はCSS。マウスオーバーしたときに、ゆきひーさんの色反転をなくして色が薄くなるようにしたので一瞬で終わります。

 

PCのコピペはここから

ダッシュボード>デザイン>カスタマイズ>デザインCSSへ。

.follow-btn{
width: 100%;
}
.follow-btn a {
display: block;
height: 50px;
line-height: 50px;
width: 100%;
font-size: 14px;
text-align: center;
text-decoration: none;

}

.follow-btn .hatena {
color: #ffffff;
background: #3D3F44;

}
.follow-btn .twitter {
color: #ffffff;
background: #00ACEE;
}
.follow-btn .instagram {
color: #ffffff;
background:#0B3861;
}

.follow-btn a:hover{
opacity: 0.5;
}

 

スマホのコピペコードはこっち

ダッシュボード>デザイン>カスタマイズ>ヘッダ>タイトル下へ。

 

<style type="text/css">
.follow-btn{
width: 100%;
}
.follow-btn a {
display: block;
height: 50px;
line-height: 50px;
width: 100%;
font-size: 14px;
text-align: center;
text-decoration: none;

}

.follow-btn .hatena {
color: #ffffff;
background: #3D3F44;

}
.follow-btn .twitter {
color: #ffffff;
background: #00ACEE;
}
.follow-btn .instagram {
color: #ffffff;
background:#0B3861;
}

.follow-btn a:hover{
opacity: 0.5;
}

<style type="text/css">

 

 以上で完成です!

 

シェアボタンのカスタマイズはこちら

そもそもこのフォローボタンは、前に設置したシェアボタンのデザインに合わせて作ってます!ので、統一感の欲しい方はこちらもどうぞ。

www.minamisouju.com

 

それでは!

written by 南蒼樹(@Sight50Sky).