【読者になる】ボタンデザインを変更する

アメブロのサイドバーの
【読者になる】ボタンデザインを変更する 方法を解説します。
 

上図のように、CSS編集用デザインの初期状態では、【読者になる】ボタンはシンプルなデザインとなっています。
 

 

1.ブログ管理

①【デザインの変更】をクリックしてください。

 

2.デザイン変更

②【CSSの編集】をクリックしてください。

 

3.画面スクロール

③ デザインCSS画面を一番下までスクロールしてください。

 
次に、CSSタグをコピー&ペーストします。

 

4.サンプルタグをコピーする

④ 以下のCSSタグをコピーしてください。

/*【読者になる】ボタンのデザイン変更
——————————————–*/
.skin-btnSidePrimary{
background: #990000;
box-shadow: 0px 0px 0px 5px#990000;
border: dashed 1px #ffa3d1;
color: #FFFFFF;
}

 
 

5.タグをペーストする

⑤ CSSタグの一番最後にタグをペースト(貼り付け)してください。

 

6.保存

6.【保存】をクリックしてください。

 

8.変更完了

サイドバーのタイトル(見出し)デザインの変更が完了しました。

 

 

その他のデザイン

 
 
icon-pencil デザインを変更する方法

サンプルタグ内の
.skin-btnSidePrimary{ ****** } のタグを変更してください。

例)
.skin-btnSidePrimary{

※サンプルタグを変更する

}

 
≫変更後
.skin-btnSidePrimary{
 border: solid 1px #000000;
 background: #088A29;
 color: #FFFFFF;
}

 


icon-pencil 枠線の太さを変更する方法

サンプルタグ内の
border: ★px の数値を変更してください

例)
 border: solid  ★px  #000000;

≫変更後
 border: solid  3px  #000000;

 


icon-pencil 枠線の色を変更する方法

サンプルタグ内の
border: ★; の数値を変更してください

例)
 border: 3px solid  ★;

≫変更後
 border: 1px solid #0B610B;

 カラーコードの見本はこちら

 


icon-pencil 背景の色を変更する方法

サンプルタグ内の
background: ★; のカラーコードを変更してください

例)
 background: ★;

≫変更後
 background: #afeeee;

 カラーコードの見本はこちら

 


icon-pencil 文字の色を変更する方法

サンプルタグ内の
color: ★; のカラーコードを変更してください

例)
 color: ★;

≫変更後
 color: #FF0000;

 カラーコードの見本はこちら