投稿日: 2017/11/23
投稿者:webコラム
こんにちは！ ライターのモモタロウです。
今回は、はてなブログカスタマイズ SNSフォローボタンをブログページに設定する方法をお伝えします。
SNSフォローボタンをブログに設定するには？
まず、はてなブログにログインします。
その後、「ダッシュボード」の左側のメニューバーにある「デザイン」をクリックします。
デザイン画面で、左上のメニューバーにある「スパナボタン」をクリックします。
メニューバーの下から二番目に「フッタ」があります。
「フッタ」をクリックすると、HTMLが編集できますので、
そこに、以下の通り記述します。
<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/
自分のはてなID/自分のブログのURLの「http://」を除いた部分/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=
自分のTwitterアカウントの@を抜いた部分 " target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.
自分のブログのURL/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a>
</div>
ブルーの部分は任意に新しく入力します。
自分のはてなID/自分のブログのURLの「http://」を除いた部分を入力します。
自分のTwitterアカウントの@を抜いた部分を入力します。
自分のブログのURLを入力します。
書き込みが終わったら「編集を保存する」をクリックします。
ブログを確認すると・・・
「はてな」、「Twitter」、「feedly」のフォローボタンが設定できました。
次に、表示されるボタンの形を変更してみよう。
四角バージョン
先ほどのメニューバーの「フッタ」の下にある 「｛｝デザインCSS」をクリックします。
クリックして編集モードになったら、以下の通り記述します。
.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
height: 45px;
line-height: 22px;
width: 25%;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.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;
}
書き込みが終わったら「編集を保存する」をクリックします。
ブログを確認すると・・・
ブログページの一番下に、四角いSNSフォローボタンが設定できました。
次に、丸いバージョンに設定してみよう。
〇バージョン
先ほどと同じように、「デザイン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;
}
書き込みが終わったら「編集を保存する」をクリックします。
ブログを確認すると・・・
ブログページの一番下に、丸いSNSフォローボタンが設定できました。
まとめ
如何でしたか？ はてなブログはさまざまなカスタマイズが可能となっております。
今回のブログテーマは編集が比較的容易な「Brooklyn」を設定しました。
外部ページの「テーマストア」で選択可能です。
是非、今回のSNSボタン設定も試してみてくださいね。
