投稿日: 2018/01/25
投稿者:webコラム

こんにちは!ライターのモモタロウです。
今回は、はてなブログカスタマイズ Twitterフォローボタンを記事の直下に表示させる方法をお伝えします。
フォローボタンを記事直下に表示させるには?
まず、はてなブログにログインします。
「ダッシュボード」から「デザイン」をクリックして、
上に並ぶ「スパナ」ボタンをクリックします。
その後、一番下にある「デザインCSS」をクリックして、以下のコードを入力します。
.follow-btn2{
width: 100%;
text-align: center;
margin: 10px 0px;
float:right;
border-bottom:2px solid darkgray;
}
.follow-btn2 .writer{
float:left;
font-size:11px;
margin-bottom:2px;
}
.follow-btn2 .twitter {
color: #00ACEE;
background: #ffffff;
float:right;
font-size:10px;
margin-bottom:2px;
}
.follow-btn2 .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}

「変更を保存する」ボタンをクリックしてCSS編集を保存します。
その後、「記事を書く」から、ブログ記事を編集していきます。
タイトルを入力して、文章を書いていこう。

書き終わったら、上に並ぶタブのうち「HTML編集」をクリックして以下のコードを入力します。
<div id="my-footer">
<div class="follow-btn2">
<style>/*記事直下のフォローボタン*/</style>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=
ここにアカウント名を入れる" target="_blank"><i class="blogicon-twitter lg"> フォローする</i><br></a>
<p class="writer">Writen by
あなたの名前</p></div></div>
「
ここにアカウント名を入れる 」はTwitterのアカウントを入力します。ただし、@は省きます。
「
あなたの名前 」部分は、あなたの名前を入力します。

「公開」ボタンをクリックして、ブログ記事を確認すると・・・
まとめ
如何でしたか? Twitterフォローボタンを記事の直下に置くことができました。
是非、試してみて下さいね。