BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ Twitterフォローボタンを記事の直下に表示させる方法

このエントリーをはてなブックマークに追加

はてなブログカスタマイズ Twitterフォローボタンを記事の直下に表示させる方法

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

bc541aa9e4cf9c70ec70dd37e10355b3_s.jpg


 こんにちは!ライターのモモタロウです。

今回は、はてなブログカスタマイズ 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;
}

20171217-3.jpg


「変更を保存する」ボタンをクリックしてCSS編集を保存します。

その後、「記事を書く」から、ブログ記事を編集していきます。

タイトルを入力して、文章を書いていこう。


20171217-2.jpg


書き終わったら、上に並ぶタブのうち「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のアカウントを入力します。ただし、@は省きます。

「 あなたの名前 」部分は、あなたの名前を入力します。


20171217-4.jpg
「公開」ボタンをクリックして、ブログ記事を確認すると・・・

20171217-5.jpg


まとめ


如何でしたか? Twitterフォローボタンを記事の直下に置くことができました。

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

カテゴリ:

TOPへ