賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する方法

どうも。葉です。

この記事では、賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する方法を解説していきます。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになることを確認してください。

下図の「変更前」→「変更後」のように賢威7の記事下にTwitterとFeedlyのフォローボタンを設置することができます。

変更前

フォローボタンはない

変更後

Twitter、Feedlyのフォローボタンが設置される

では実際に、PHPやCSSコードを編集して、TwitterとFeedlyのフォローボタンを設置していきます。

2.賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順1

「個別投稿(single.php)」をクリックしてください。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順2

「</div><!–article-body–>」の下に次のコードを入力してください。

<!--Twitter,Feedlyフォローボタン-->
<div class="follow-btn" >
<span style="font-size:100%; text-align:center">▲▲をフォローして最新情報をゲット</span><br>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=〇〇" target="_blank"><span class="text-small">Twitterでフォロー</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/●●/feed" target="_blank"><span class="text-small">Feedlyでフォロー</span></a>
</div>
<!--Twitter,Feedlyフォローボタン-->
  • 上記コード内の、▲▲の部分には、あなたの名前やブログ名を入力してください。
  • 上記コード内の、〇〇の部分には、あなたのTwitterユーザー名から@を抜いたものを入力してください。
  • 上記コード内の、●●の部分には、あなたのブログURLを入力してください。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順3

すると、次のように記事下にTwitterとFeedlyをフォローするためのリンクが表示されます。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順4

CSSでデザインカスタマイズ

ただ、このままだと見た目がダサいので、CSSをカスタマイズして、デザインを調整していきます。

「base.css」をクリックしてください。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順5

「base.css」の最下部に次のコードを入力してください。

/*-------------------------------------
Twitter、feedlyのフォローボタンデザイン
-------------------------------------*/
.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    background: #F4F4F4;
}
.follow-btn a {
    display: inline-block;
    width: 46%;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}
.follow-btn .twitter {
    color: #ffffff;
    background: #00ACEE;
    border: 2px solid #00ACEE;
}
.follow-btn .feedly { 
    border: 2px solid #70CA3B;
    color: #ffffff;
    background: #70CA3B;
}
.follow-btn .twitter:hover {
    color: #00ACEE;
    background: #ffffff; 
    transition: all .3s;
}
.follow-btn .feedly:hover {
    color: #70CA3B;
    background: #ffffff;
    transition: all .3s;
}
.text-small{
    font-size: 14px;
}

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順6

すると、次のように記事下にTwitterとFeedlyのフォローボタンがきれいに表示されているはずです。

賢威7の記事下にTwitter、Feedlyのフォローボタンを設置する手順7

3.まとめ

この記事では、賢威7の記事下にTwitterのFeedlyのフォローボタンを設置する方法を解説しました。

この他にもFacebookページフォロー用のいいねボタンを記事下に設置したい場合は、次の記事を参考にしてください。