30種から選べる！アメブロのフォローボタンをカスタマイズ｜色・デザインを素敵に変身！

この記事では、アメブロのフォローボタンのカスタマイズ方法を解説しますね。

サイドバーにある👇の「＋フォロー」部分のことですね。

好きな色に変更できちゃいます。

あめっくま

30種類の色見本を用意しました！ブログの雰囲気に合わせて、デザインを選んで下さいね。

自己紹介はこちら⇒

変更できるテーマ
フォローボタンのカスタマイズ手順
全30種！フォローボタンの色・デザイン素材

この記事を書いた人

あめっくま

Amebaオンラインレッスン認定講師
アメブロ収益UP講座を運営
コンサル生300名以上が収益UPに成功

>> 提供サービスはこちら

>> あめっくまをフォロー

＼アメブロ20記事で5万PVの手法／

アメブロで資産記事を作る方法はこちら ⇒

＼ついに登場！アメトピ攻略法／

アメトピ攻略法はこちら ⇒

変更できるテーマ

フォローボタンの色をカスタマイズできるテーマは、👇の「CSS編集用デザイン」です。

CSSの各コードの意味は分からなくても大丈夫！

あめっくま

色を決めて、コピペするだけでOKです。

フォローボタンのカスタマイズ手順

STEP① CSSの編集画面を開く

まずは、こちらのデザイン変更画面を開きます。

続いて、「CSSの編集」をクリックして下さい。

CSSでカスタマイズできる画面が出てくるので、下にスクロールしましょう。

「（5-4）サイドボタン」にある「サイド強調ボタン」のコードを変更します。

補足

ちなみに、各値には次の意味があります。

border-color ⇒ 枠線の色

background-color ⇒ ボタンの背景色

color ⇒ ボタン（+フォロー）の文字色

#6桁の英数字 ⇒ 色を決めるカラーコード

コードが分かる方は、好きな色にカスタマイズして下さいね。

この記事の後半では、見本とカラーコードを豊富に用意しています。

STEP② 色を変える

例えば、👇のピンク色のフォローボタンにする場合・・・

フォロー

次のコードをコピペして、貼り替えます。

border-color: #e8909c;
background-color: #e8909c;
color: #ffffff;

下記のように、コードを変更できればOK

コードを貼り替えたら、「保存」をクリックして完成！

👇のとおり、フォローボタンの色が変わりました。

コードをコピペするだけなので、簡単ですね

あめっくま

この後に紹介する色素材を使って、お好みにカスタマイズして下さいね。

全30種！フォローボタンの色・デザイン素材

ピンク・赤

フォロー

border-color: #ffe4e1;
background-color: #ffe4e1;
color: #f88080;

フォロー

border-color: #e8bac0;
background-color: #e8bac0;
color: #ffffff;

フォロー

border-color: #e8909c;
background-color: #e8909c;
color: #ffffff;

フォロー

border-color: #f88080;
background-color: #f88080;
color: #ffffff;

フォロー

border-color: #e64f4d;
background-color: #e64f4d;
color: #ffffff;

フォロー

border-color: #d9333f;
background-color: #d9333f;
color: #ffffff;

フォロー

border-color: #a02438;
background-color: #a02438;
color: #ffffff;

オレンジ・黄色

フォロー

border-color: #ffb46c;
background-color: #ffb46c;
color: #ffffff;

フォロー

border-color: #fca60d;
background-color: #fca60d;
color: #ffffff;

フォロー

border-color: #ec8810;
background-color: #ec8810;
color: #ffffff;

フォロー

border-color: #fff7b3;
background-color: #fff7b3;
color: #daa520;

フォロー

border-color: #f5d000;
background-color: #f5d000;
color: #ffffff;

フォロー

border-color: #d7c014;
background-color: #d7c014;
color: #ffffff;

ベージュ・ブラウン

フォロー

border-color: #ffefd5;
background-color: #ffefd5;
color: #d1923f;

フォロー

border-color: #f0bc94;
background-color: #f0bc94;
color: #ffffff;

フォロー

border-color: #d2b48c;
background-color: #d2b48c;
color: #ffffff;

フォロー

border-color: #b4886c;
background-color: #b4886c;
color: #ffffff;

フォロー

border-color: #b4682c;
background-color: #b4682c;
color: #ffffff;

グリーン

フォロー

border-color: #c8fac8;
background-color: #c8fac8;
color: #59a136;

フォロー

border-color: #9aca8c;
background-color: #9aca8c;
color: #ffffff;

フォロー

border-color: #83d071;
background-color: #83d071;
color: #ffffff;

フォロー

border-color: #59a136;
background-color: #59a136;
color: #ffffff;

フォロー

border-color: #006a6c;
background-color: #006a6c;
color: #ffffff;

ブルー・パープル

フォロー

border-color: #ccffff;
background-color: #ccffff;
color: #679bcf;

フォロー

border-color: #82c4b8;
background-color: #82c4b8;
color: #ffffff;

フォロー

border-color: #84aacf;
background-color: #84aacf;
color: #ffffff;

フォロー

border-color: #87cefa;
background-color: #87cefa;
color: #ffffff;

フォロー

border-color: #4169e1;
background-color: #4169e1;
color: #ffffff;

フォロー

border-color: #4d5393;
background-color: #4d5393;
color: #ffffff;

フォロー

border-color: #988ccc;
background-color: #988ccc;
color: #ffffff;

フォロー

border-color: #9f609f;
background-color: #9f609f;
color: #ffffff;

あめっくま

オシャレな色を選んで、素敵なブログにしましょうね！

＼フォローバックしてます／

おすすめコンテンツ

✅アメブロ収益化・集客UPまとめ

▶ 【全部公開】アメブロのアクセスアップ・集客10のコツ！

▶ アメトピ掲載のコツ7つが発覚！全く採用されない理由も明らかに！

▶ 【簡単】アメブロのフォロワー数を増やす3つの方法

▶ アメブロのリンクの貼り方にはコツがある！売上UPする活用法とは？

▶ 【アメブロのハッシュタグ】効果のある付け方はコレ！

✅コンサルティングメニュー

✔ 高単価メニュー販売実践講座
　⇒高単価メニューを売りたい人向けに、長期間完全マンツーマンサポート！

✔ ビジネスブログ収益UPサポート
　⇒ビジネスブログの改善アドバイスをチャットで受け放題！

✅実施中のWebセミナー

✔ アクセス・集客UP実践セミナー
　⇒アクセス・集客UP方法を実際の画面で紹介！

✔ 売れる告知記事作成セミナー
　⇒読者が申し込みたくなる告知記事作成テクニックを紹介！

✔ Canva活用・収益UPレッスン
　⇒Canvaの使い方～収益UPノウハウまで紹介！

「アメブロ収益UP講座」の一覧はこちら⇒

✅公式note

✅お問い合わせ・お仕事依頼

お問い合わせ・お仕事依頼はこちら⇒