フォローボタンを好きな色に変更する方法♡６色サンプル付き

 

 

 

アメブロのフォローボタンを

好きな色にカスタマイズしましょう♡

 

この記事の内容
  • フォローボタンの色変更
  • オススメのカラーコードサイト
  • コピペで使えるボタン６色

 

基本のフォローボタンは

ダークグレー

ちょっと寂しい感じなので

 

(5-4)サイド強調ボタン 
 

こちらから

カラーコードを変更すると

フォローボタンを好きな色にできます♡

 

 

 

✿CSS変更できるか確認

 

まずは「CSS」に追加するために

デザインが決まっているものではなく

カスタム可能になっているか確認しましょう

 

アメブロ管理トップ

▼

デザインの設定

▼

CSS編集デザイン

 

 

「CSS」が編集できるようでしたら

編集できる画面へクリック

 

 

ブログデザインのCSSの編集

というページに行きましょう。

 

✿ボタン設定画面へ

 

CSS編集画面では

いろんなエリアのスタイルがあり

 

フォローボタンの色は

(５)ボタン設定

から変更するようになります

 

ぐぐっと下にスクロールして

 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::
(5)ボタン設定
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::

 

が見えてきたら

小分けに

(5-1)(5-2)(5-3)(5-4)(5-5)

 

となっているので

さらに下にいき

 

(5-4) サイドボタン

 

までスクロールします

 

✿デザインCSSに追加

 

サイドボタンの中の

 

サイド強調ボタン

/* サイド強調ボタン */
.skin-btnSidePrimary {
border-color: #404040;
background-color: #505050;
color: #ffffff;
}

 

border-colorは四角の外枠
background-colorは四角の内側

colorは文字

 

その隣にある

「#」から始まる数字が

その部分の色をあらわしているので

 

この数字を

好きなカラーコードに変えると

フォローボタンの色が変えられます♡

▸カラーコードが選べるオススメサイト♡

 

 

✿ボタンカラーサンプル

 

簡単に色を変更できるよう

カラーバリエーションも揃えてみました♡

 

コピペして使えます(*^^*)

 

ピンク【#FF7575】

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

 

オレンジ【#FCAF22】

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

 

ターコイズ【#05FFD1】

border-color: #05FFD1;
background-color: #05FFD1;
color: #ffffff;

 

ミントグリーン【#58CE91】

border-color: #58CE91;
background-color: #58CE91;
color: #ffffff;

 

藤色【#D3ABC3】

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

 

桃色【#FFB3AF】

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

 

 

 

フォローボタンが可愛くなると

ブログも華やかで魅力的になり

 

クリック率が上がりますので

ぜひ活用してくださいね♡

 

 

案内メニュー
継続サポート▶サポート詳細
デザイン作成▶MENU内容・料金

 

お客様ご感想▶お客様の声