賢威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ユーザー名から@を抜いたものを入力してください。
  • 上記コード内の、●●の部分には、あなたのブログURLを入力してください。

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

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

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

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

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

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

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

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

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

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

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

3.まとめ

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

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