アメブロサイドバーのタイトル(見出し)背景を画像にする

アメブロのサイドバーの
タイトル(見出し)背景を画像にする 方法を解説します。

上図のように、CSS編集用デザインの初期状態では、タイトル(見出し)はシンプルなデザインとなっています。
 

 

1.ブログ管理

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

 

2.デザイン変更

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

 

3.画面スクロール

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

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

 

4.タグをコピーする

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

/*タイトル背景を画像にする
———————————-*/
.skin-widgetHead{
width: ★px; /*画像の横幅*/
height: ★px; /*画像の高さ*/
background-image: url(【画像URL】);
}

.skin-widgetTitle{
padding: 10px 10px 10px 20px;
border: 0;
margin: 0;
}

 
 

5.タグをペーストする

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

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

 

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

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

 

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

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

 

8.タグの編集

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

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

 

9.保存

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

 

10.変更完了

タイトル(見出し)画像の変更が完了しました。