本記事の内容
本記事の信頼性
この記事を書いている僕は、副業ブログ歴4年目のブロガーです。当ブログでは「AFFINGER6」を使用しております。当ブログ含め3つのメディア運営をしており、ブログ収益で月収30万円を継続しています。
今回は、AFFINGER6でカスタマイズした以下のTwitterフォロワーボタンを作ります。
上記と同じ形のカスタマイズした、フォロワーボタンを作りたい方はこちらをクリックすれば制作手順に飛びます。
準備編
下記をご準備ください。
準備するもの
- Twitterアカウント（使用アカウントに限る）
- AFFINGER6（有料テーマ）
- Advanced Editor Tools（プラグイン）
- 使いたい素材画像
- 好みのテキスト
- 画像編集ツール（必要な場合のみ）
本記事は、有料テーマAFFINGER6を使ったカスタマイズ方法の紹介です。
まだ購入を検討している方は、以下の記事「【2023年】おすすめWordPressテーマはAFFINGER6！理由も詳しく解説」にて詳しく解説しています。
-
-
【2023年】おすすめWordPressテーマはAFFINGER6！理由も詳しく解説
有料テーマSWELLには、下記のSNSフォロワーボタン「この記事が気に入ったらフォローしてね」ボタンを簡単に作ることができます。
しかし残念な事に、AFFINGER6には標準装備されていません。
ですが、AFFINGER6の機能を活用することで、簡単にTwitterフォロワーボタンを作ることができます！
特に難しいコードを書く作業はありません。本記事を参考にコピペで完成できます。
-
-
AFFINGER6を導入すればSEOに強くなる理由【10選】
では、いきます。
Twitterフォロワーボタンの作り方
では、さっそくTwitterフォロワーボタンの作り方を紹介します。
↓これを作ります。
以下のコードをカスタマイズします。
<a href="https://twitter.com/Twitterユーザー名を入れる?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Twitterユーザー名</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
赤文字部分を@から始まるTwitterユーザー名をコピペして貼り付けます。
ボクのTwitterアカウントの場合「@taku_sns」をコピーして貼り付けます。
以下のようにカスタマイズすればOK！
<a href="https://twitter.com/@taku_sns?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @taku_sns</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
半角スペースなどに注意しましょう！
コピーしたコードを「テキストモード」に切り替え、貼り付けます。
ビジュアルモードでの表示
テキストモードでの表示
コードの確認
html
<a class="twitter-follow-button" href="https://twitter.com/@taku_sns?ref_src=twsrc%5Etfw" data-show-count="false">Follow @taku_sns</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
確認のためプレビューモードでボタンをクリックして、自分のアカウントに飛ぶか見てみましょう！
Twitterフォロワーボタンのカスタマイズ方法
次は、Twitterフォロワーボタンのカスタマイズ方法です。
先ほど作成したボタンは「@〇〇さんをフォロー」しか表示されていませんでした。
画像を追加する、テキストを大きくする、フォロワー人数の表示など、カスタマイズ方法を紹介します。
以下の手順で、ボックスを表示させます。
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択します。
選択すると以下のコードが出ます。
html
[st-flexbox url="" rel="nofollow" target=""
webicon="" title="タイトル" width="" height=""
color="#fff" fontsize="200" radius="0" shadow="#424242"
bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0" myclass=""]
[/st-flexbox]
以下の赤枠内に先ほどのコードを入れてカスタマイズしていきます。
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択
バナー風ボックスが表示されるので、先ほどのコードと組み合わせてカスタマイズします。
タイトル
カスタマイズするコード
html <a href="https://twitter.com/Twitterユーザー名を入れる?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Twitterユーザー名</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
| コピーするコード | 内容 |
| data-show-screen-name="false" | ボタンにユーザー名を表示しない |
| data-show-screen-name="true" | ボタンにユーザー名を表示する |
| data-size="large" | ボタンサイズを大きくする data-size="large"を消す事でボタンが小さくなる |
| title="タイトル" | タイトルテキストを入れる |
| fontsize="100" | タイトルテキストの大きさ |
| backgroud_image="背景画像URL" | 入れたい背景画像URLを入れる※空欄だとグレーのまま |
| height="200px" | ボックス高さ(今回は200px) |
➀：画像の上にフォロワーボタンの表示
この記事が気に入ったらフォローしてね！
html [st-flexbox url="" rel="nofollow" target="" webicon="" title="この記事が気に入ったらフォローしてね！" width="" height="200px" color="#fff" fontsize="100" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="" bgcolor="#ccc" backgroud_image="https://www.educationaloptions.com/wp-content/uploads/2022/11/5577859_575-1.jpg" blur="" left="" margin_bottom="0" myclass=""] <a class="twitter-follow-button" href="https://twitter.com/taku_sns" data-size="large" data-show-screen-name="false" data-show-count="true">Follow @taku_sns</a> <script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script> [/st-flexbox]
- data-size="large"：文字を大きくする
- data-show-screen-name="false"：アカウント名の非表示
- data-show-count="true"：フォロワー人数の表示
- backgroud_image="好きな画像URL"を入れる
➁：アカウント名の表示とフォロワー人数の表示
この記事が気に入ったらフォローしてね！
html [st-flexbox url="" rel="nofollow" target="" webicon="" title="この記事が気に入ったらフォローしてね！" width="" height="200px" color="#fff" fontsize="100" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="" bgcolor="#ccc" backgroud_image="https://www.educationaloptions.com/wp-content/uploads/2022/11/5577859_575-1.jpg" blur="" left="" margin_bottom="0" myclass=""] <a class="twitter-follow-button" href="https://twitter.com/taku_sns" data-size="large" data-show-screen-name="true" data-show-count="true">Follow @taku_sns</a> <script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script> [/st-flexbox]
- data-size="large"：文字を大きくする
- data-show-screen-name="true"：アカウント名の表示
- data-show-count="true"：フォロワー人数の表示
- backgroud_image="好きな画像URL"を入れる
③：フォローするボタンのみ
この記事が気に入ったらフォローしてね！
html [st-flexbox url="" rel="nofollow" target="" webicon="" title="この記事が気に入ったらフォローしてね！" width="" height="200px" color="#fff" fontsize="100" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="" bgcolor="#ccc" backgroud_image="https://www.educationaloptions.com/wp-content/uploads/2022/11/5577859_575-1.jpg" blur="" left="" margin_bottom="0" myclass=""]</p> <p style="text-align: center;"><a class="twitter-follow-button" href="https://twitter.com/taku_sns" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @taku_sns</a> <script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p> [/st-flexbox]
- data-size="large"：文字を大きくする
- data-show-screen-name="false"：アカウント名の非表示
- data-show-count="false"：フォロワー人数の非表示
- backgroud_image="好きな画像URL"を入れる
④：フォロワーするボタン（テキスト小）
この記事が気に入ったらフォローしてね！
html [st-flexbox url="" rel="nofollow" target="" webicon="" title="この記事が気に入ったらフォローしてね！" width="" height="200px" color="#fff" fontsize="100" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="" bgcolor="#ccc" backgroud_image="https://www.educationaloptions.com/wp-content/uploads/2022/11/5577859_575-1.jpg" blur="" left="" margin_bottom="0" myclass=""] <p style="text-align: center;"><a class="twitter-follow-button" href="https://twitter.com/taku_sns" data-show-screen-name="false" data-show-count="false">Follow @taku_sns</a> <script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p> [/st-flexbox]
- data-size="large"を消去
※消去するとテキストが小さくなります - data-show-screen-name="false"：アカウント名の非表示
- data-show-count="false"：フォロワー人数の非表示
- backgroud_image="好きな画像URL"を入れる
⑤：当ブログで使用しているフォロワーボタンの作り方
html
<div class="clearfix responbox50">
<div class="lbox">
<img class="aligncenter wp-image-2211" src="https://writing-living.com/wp-content/uploads/2022/12/Follow-Me-680x390.jpg" alt="" width="400" height="210" />
</div>
<div class="rbox">
<p style="text-align: center;">この記事が気に入ったら
<i class="st-svg-twitter fa-lg" style="color: #2c9bf0;" aria-hidden="true"></i>フォローしてね</p>
<a href="https://twitter.com/taku_sns"><img class="wp-image-2216" src="https://www.educationaloptions.com/wp-content/uploads/2022/12/Twitter-social-icons-circle-blue-100x100.png" alt="" width="45" height="45" /></a> <a href="https://twitter.com/taku_sns">Twitter</a>
<p style="text-align: center;"><a class="twitter-follow-button" href="https://twitter.com/taku_sns" data-size="large" data-show-screen-name="false" data-show-count="true">Follow @taku_sns</a>
<script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
</div>
</div>
作り方
- 「タグ」→「レイアウト」→「PCとTab(959px以上）」→「左右50%」を選択
- 左に好きな画像を入れる「このテキストは最後に消して下さい（50%）」を消去
- 右側にテキストを入れる（好きなワードでOK）
- Twitterアイコン画像を入れる（アイコンサイズは45×45px）
- アイコンにTwitterアカウントのURLを追加
- 表示されたキャプションテキストにTwitterのURLリンクを追加
- 右側部分を「中央揃え」にする
Twitterアイコンは公式HPよりダウンロード可能です。
画像上にテキストを表示させる場合、バナー工房やCanvaを使いましょう。
Twitterアイコンの編集方法
- 投稿画面にTwitterアイコンを表示させる
- Twitterアイコンをクリック→編集を選択
- キャプションにTwitterアカウントを挿入
＠から始まる部分です - 表示設定サイズ：カスタムサイズを選択し幅45×高さ45にする
- 画像下に表示されたTwitterアカウントのテキストに自分のTwitterアカウントのURLを入れる
こんな感じで作れます！（画像とテキストは変更しています。）
ポイント
「タグ」→「レイアウト」→「PCとTab(959px以上）」→「左右50%」を選択することで、パソコン・タブレット・スマートフォンサイズでの表示も位置ズレなどは発生しません！
オリジナルのTwitterフォローボタンが完成したらマイブロックに登録して、すぐに出せるようにしておきましょう！
Twitterフォロワーボタンのカスタマイズ方法は以上です！
カスタマイズしてブログ運営に力を入れよう
TwitterのフォロワーボタンはAFFINGER（アフィンガー）を使えば、簡単に作ることが可能で、カスタマイズも可能です。
SWELLに元々ある機能ですが、うまく使いこなせばオリジナルボタンを作ることができます。
後述にはなりましたが、フォロワーボタンを作ってからのフォロワー数が右肩あがりで増え続けています。
細かいテクニックになりますが、内容が良かったらいいねボタンを押しもらう感覚で、記事の最後にフォロワーボタンを作りました。
