この記事ではアメブロカスタマイズ編としてフォローボタンの色を変更する方法をご紹介していきます。
アメブロではフォロー機能が標準搭載されており、気になったブログをフォローすることができます。フォローボタンはデフォルトで色や形が決まっていますが、CSS編集を利用することで任意の色に変更することができますので、ぜひ実践してみてください。
アメブロのフォローボタンとは？
アメブロでフォローとしたブログは自分のフィードに新着記事などで更新される仕組みとなっています。一般的なSNSと同様のフォローシステムとなっています。
フォローボタンを押すと「公開でフォロー」と「非公開でフォロー」があり、いずれの場合もフォローをすることになります。
フォローをすることによって、気に入ったブログを探さずに瞬時に見にいくことができますし、新着記事がでれば通知を受信することもできます。
ブログ投稿者側としては、フォロワーを増やすことで、より多くの人に自分の記事を観てもらえる確率が高くなりますので、フォロワーを増やす施策を行うことが賢明と言えます。
デザインの確認：CSS編集可能にする
フォローボタンの設置方法ですが、多くのデザインではサイドバーにフォローボタンが設置されていますが、スマホから見ると表示されない場合が多くあります。
そのため、記事中にもフォローボタンを設置しておくことで、どのデバイスからでもフォローをしてもらいやすくすることができます。
記事の中にフォローボタンを入れる方法は以下の手順となります。
【フォローボタンを記事中に入れる方法】
- アメブロへログイン
- 記事投稿画面を開く
- エディタより「おねだり」を開く
- 「フォローボタン」を選択
- 記事中にフォローボタンが表示される
- 完了
投稿画面のエディタ機能より「おねだり」と呼ぶアイコンを選択します。フォローボタン内の好きなデザインを選択し、クリックすることで記事中にボタンが設置されます。
このような操作だけで簡単にフォローボタンをブログ内に配置することが可能ですが、ボタンのデザインを変えたいとなったときにはCSS編集モードで行えば希望のデザインに変更することができます。オリジナルデザインのボタンを使えば、読者にアピールすることができるでしょう。
特定のコードを挿入する
サイドバーに設置しているデフォルトのフォローボタンのデザインを変えたいとき、画像をアップロードするやり方とCSSコードを挿入する方法があります。一般的にはCSSコードを入れるやり方が望ましいです。
画像をアップロードする場合は、画像のサイズにおける制限や著作権などがあるので注意しましょう。基本的には自分でデザインしたもので数キロバイト程度の容量のJPEGやGIF形式の画像なら問題はありません。
CSSコードの場合、下記をアメブロデザインのCSSに貼り付けることによって変更が可能です。
.skin-btnSidePrimary {
background-color: #4ec276;
color: #fff;
}ボタンの色を変更したい場合には「#4ec276」の部分を変更することで、自由に色を変更することができます。
フォローボタンを編集するメリット
フォローボタンを設置することで読者数を増やす効果が期待できますし、オリジナルデザインのボタンを配置しておけば見た人が気に入ってくれることで効率的にフォロワーを増やすことができます。
従来のアメブロはこのフォローボタンの代わりに読者になるといったボタンが標準になっていてましたが、フォローという名称に変わっていますので注意が必要です。
現在では公開フォローや非公開フォローなど、フォロー周りの機能は順次アップデートされています。そのため、最新の状態を確認して集客に役立つ方法を試行錯誤していくが望ましいと言えます。
いずれにせよ、フォローボタンをカスタマイズすることはフォロワーの獲得に繋げることができますので、おすすめの施策と言えます。
まとめ
フォローボタンの色を変更する方法をご紹介してきましたが、いかがでしたか？
アメブロのフォローボタンはデフォルト状態だと他のブログとの差別化ができませんが、CSSで色を編集することで他のブログとは違うオリジナリティが溢れるブログを構築できます。やり方も簡単になっていますので、ぜひ取り組んでみることをおすすめします。
