ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 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フォローボタンを記事の直下に置くことができました。

是非、試してみて下さいね。