前回までの内容
アメーバブログで背景色（画像）を変更する方法（CSS編集）（１）
これでは、タイトル部分が「文字だけ」の味気ない感じになったまま。
そこで、画像をタイトルに付け加える。
【1】PNG画像を用意（背景色の透過が必要）
フタイトルの背景に画像を付け加える場合、PNG画像を用意し、背景色を透過させないといけない。
これを自分で用意するとなると、多少の知識と経験が必要になる。
元々できあがったPNG画像を用意できるのであれば、あとは大きさを考えるだけになる。
文字が配置される場所は決まっていて、そこに背景が重なった場合を、考える必要がある。
左右は、繰り返し配置される、らしい。
下端は、画像の高さ。つまり、画像の高さが「高すぎる」と、タイトルだけ伸びてしまう。
ここでは、こんな画像を用意した。
【２】PNG画像をブログに登録（URL取得）
（a）画面表示
自分のブログ内（つまりネットサーバー上）に画像を登録しなければ、世界中で表示される画像にならない（自分のパソコン内にあっても、世界中の人が見ることはできない）。
前回の記事と同様に
「ブログ管理」→「デザインの設定」→「ＣＳＳの編集」
でスタイル記述欄を表示させる。
※ 詳しくはアメーバブログでフォントを変更する方法（２）の
「 【３】CSS編集でフォント名を変更 」
を参照してください。
画面先頭に
「ブログデザインヘッダ・背景用画像の追加」
という項目が表示される。
※ 下図参照
（b）画像をパソコン内から選択
「参照」ボタンを押す。
パソコン内から、用意した画像を選択する。
選択し終えると、以下のようになる。
ファイル名が表示される（水色の四角）。
「アップロード」ボタンを押す（赤い四角）。
上記の確認画面が表示されるけれど、おそらく、「他にもアップロードする？」みたいな確認だと思われる。
よって、これはキャンセルにしておく。
（再送信を選ぶと、また画像を選ぶことになるようだ）。
【３】CSSにPNG画像URLを追加
（a）画像URLをコピー
アップロードされた画像が表示される（下図参照）。
「この画像のパス」と書かれている欄に、URLが書き込まれているので、
「右クリック」 → 「コピー」
（いきなり右クリックでURL全体が選択される）
とする。
（b）画像URLをCSSに貼り付け
※ 注意
まずは、とりあえず貼り付けするけれど、完成ではありません。
コピペする内容（コピーしてある内容）。
https：//stat.blogskin.ameba.jp/blogskin_images/2…（中略）…41159.png
場所は、下の写真の位置。
目次
→ 「 (2)ヘッダーエリアのスタイル 」
→ 「 (2-1)ヘッダー背景 」
→ 「 /* ヘッダー背景 */ 」
の、
.skin-bgHeader {
～
}
の中。
{ ～ } の中なので、間違えないように。
（c）修正
URLそのままでは、認識しないので、文法を整えて修正。
/* 変更 */
background-image : url("https：//stat.blogskin.ameba.jp /blogskin_images/2…（中略）…41159.png");
つまり、
background-image : url(" ");
の中に、画像URLを書き込む、という形。
赤い四角のようになる。
*************************************************************
Windows用フリーソフト（無料）総合サイト
http://yoyontek-develop.minim.ne.jp/
-------------------------------------------------------------
(1) 【 背景透過＆境界線お掃除 】
http://yoyontek-develop.minim.ne.jp/clean-pic-fringe/
画像ファイルの背景を透過させ、境界線の汚れを除去（PNG対応）
-------------------------------------------------------------
(2) 【 休憩タイムアラート for KIDS 】
http://yoyontek-develop.minim.ne.jp/alert-kids/
子供のゲーム中に休憩時間をお知らせ
*****************************************
