【読者になる】ボタンを画像にする

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

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

 

1.ブログ管理

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

 

2.デザイン変更

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

 

3.画面スクロール

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

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

 

4.タグをコピーする

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

/*【読者になる】ボタンを画像に変更
———————————-*/
.skin-btnSidePrimary {
width: ★px;
height: ★px;
text-indent: -9999px;
max-width: none;
border:none;
background: no-repeat 0 0;
background-image: url(【画像URL】);
}

 
 

5.タグをペーストする

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

 
次に、タイトルに表示する画像をアップロードします。

 

6.画像をアップロードする

⑥【ファイルを選択】から画像をアップロドしてください。

 

7.画像パスをコピーする

⑦ 枠内の画像パスをコピーしてください。

 

8.タグの編集

ステップ5でペーストしたCSSタグを編集します。

⑧ ★に横幅と高さのサイズを上書きしてください。
⑨【画像URL】に「画像パス」を上書きしてください。

 

9.保存

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

 

10.変更完了

【読者になる】ボタン画像の変更が完了しました。