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

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

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

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


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





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





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





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





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





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





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






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

---

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

• 作者: 狩野 祐東
• 出版社/メーカー: ソフトバンククリエイティブ
• 発売日: 2013/05/28
• メディア: 大型本

作りながら学ぶ HTML/CSSデザインの教科書

• 作者: 高橋 朋代
• 出版社/メーカー: SBクリエイティブ
• 発売日: 2013/12/17
• メディア: 大型本

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

• 作者: 赤間 公太郎
• 出版社/メーカー: エムディエヌコーポレーション
• 発売日: 2013/09/20
• メディア: 単行本

---

タグ：So-netブログ

コメント 4

とても参考になりました。
何よりバナーの画像が楽しいですね（＾＾)

by taka (2014-08-19 02:01) 

この解説ありがたいです。
変えてみたいと思っていました。
参考にさせていただきます。
by assimane (2014-08-19 07:20) 

takaさん、assimaneさん、コメントありがとうございます！ご参考になれば幸いです！！＾＾
by ys_oota (2014-08-20 01:25) 

いやー。出来るんですね。
いつも、ここ何とかなんないの？って思ってました。
貼り付ける画像選定や編集の方が大変そうだけどね。
センスないんで。

タイトルバナーと記事の間に、サイドバーならぬトップバーを仕込めるとＨＰ風になって嬉しいなぁって思っているんですが・・・・
by jack-key (2015-04-26 10:52)