タイトルバナー（フォトヘッダー）画像を変えてみた（解説編）

タイトルバナー（フォトヘッダー）画像の変更方法を解説します。
So-netの公式サイトで変更方法が解説されていますが、画像サイズが指定されているのが気に入りません。

「オリジナルフォトヘッダー」を使う
http://blog-help.blog.so-net.ne.jp/originalphotoheader

どうせなら細長いバナー画像（フォトヘッダー）を設定したいなと思うのですが、上記サイトの通り設定してもうまくいきません。

実際に 900px ｘ 300px の画像を設定してみます。（標準は 900px ｘ 520px）
管理サイトの「テンプレート管理」を開きます。現在使っているテンプレートを選択して「編集」をクリックします。

上記サイトの手順にしたがって、900px x 300px の画像に差し換えてみます。

プレビューを見てみると、バナー画像のエリアは変わらずに広いままです。このままだと間抜けです。

バナー画像の表示エリアを変更してみました。

プレビューを見ると、ほぼ希望通りの表示になっていますがタイトルテキストの位置が気になります。

タイトルテキストを上にもっていくようにテキストエリアの位置を調整します。

テキストと画像のかぶりも少なくなり、見栄えがよくなりました。

かなり簡単に修正をしましたが、使うテンプレートによって定義内容は異なります。もし編集される場合は、お使いのテンプレートの内容を熟知した上で変更してくださいね。
（＾_＾）／～

スラスラわかるHTML&CSSのきほん