【カスタマイズ】コピペで簡単！フォローボタンを可愛く

こんにちは、まほろばんです。

ブログを初めてもうすぐ２か月。
少しずつカスタマイズしています。

今回は、SNSのフォローボタンを
可愛らしくするカスタマイズに挑戦しました。

備忘録的にまとめますので、
ご参考になれば幸いです。

では、方法をご紹介していきましょう。

フォローボタンは丸型に
カスタマイズの方法
- ①HTMLにコードをコピペ
- ②CSSでデザインを変更する
まとめ

フォローボタンは丸型に

設置したフォローボタンはこちら。
丸型にして可愛らしい雰囲気になりました。

今回は「はてな」・「twitter」・「Feedly」の３つだけですが、
facebookなどとも連携することができます。

f:id:mahoroban:20180703155217j:plain

参考にしたのは、いつも参考にさせてもらっている
「ポジ熊」さんと「ゆきひー」さんです。

ポジ熊さんのブログで見て一目惚れ。
調べたら、ゆきひーさんのブログに
方法がまとめられていました。

お二人とも有益な情報をまとめてくださるので、
大変勉強になります。
ぜひ、参考にしてみてください！

カスタマイズの方法

では、カスタマイズの方法をご紹介していきましょう。
大きく分けると２つの作業が必要になります。

作業の前には、必ずバックアップをとりましょう！

①HTMLにコードをコピペ

まずは、HTMLにリンクを貼り付けましょう。
コードは以下になります。

<div class="follow-btn" >
フォローする 
<a class="hatena" href="http://blog.hatena.ne.jp/(自分のはてなID)/(自分のブログのURLの「https://」を除いた部分)/subscribe" target="_blank"> はてな</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=自分のTwitterアカウントの@を抜いた部分" target="_blank"> Twitter</a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/自分のブログのURL/feed" target="_blank"> Feedly</a>
</div>

まず、赤文字のところを入力します。
これを「記事下」「記事上」「サイドバー」など、
自分が設置したい場所に貼ります。

僕は、サイドバーに貼りたかったので、
下記の作業になりました。

カスタマイズの「スパナマーク」からサイドバーを選択。
そして、「＋モジュールを追加」を選びます。

f:id:mahoroban:20180703160510j:plain

そこから下記の図①のHTMLを選び、②にタイトルを記入。
この②がそのままブログに表記されます。

そしてその下にコードをコピペします。

f:id:mahoroban:20180703160354j:plain

ここまでは大丈夫でしょうか？
「変更を保存する」を押すと、下記のようなボタンが表示されます。

f:id:mahoroban:20180703160959j:plain

これでリンクをつけることは終了です。
それぞれのボタンを教えてみて、
正しく反応するかを確認してください。

②CSSでデザインを変更する

ここからが２つ目の作業です。
CSSでデザインを変更していきます。

僕は丸型のシェアボタンなので、
下記のコードを貼りました。

.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
width: 60px;
height: 60px;
line-height: 32px;
font-size: 14px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.follow-btn .hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff;
}
.follow-btn .twitter {
color: #00ACEE;
border: 2px solid #00ACEE;
background: #ffffff;
}
.follow-btn .feedly {
color: #70CA3B;
border: 2px solid #70CA3B;
background: #ffffff;
}
.follow-btn .hatena:hover {
color: #ffffff;
background: #3D3F44;
transition: all .3s;
}
.follow-btn .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}
.follow-btn .feedly:hover {
color: #ffffff;
background: #70CA3B;
transition: all .3s;
}
.text-small{
font-size: 8px;
}