こんにちは!やんやんです(・ω・)ノ
いよいよブログの顔ともいうべき「ヘッダー画像の変更」に挑戦です。
カスタマイズテスト用ブログを用いて説明していきます。
カスタマイズテスト用ブログはhttp://ameblo.jp/sample-01/ です。
まずヘッダーの位置を確認してみます。
タイトルとブログの説明の位置がヘッダー画像を置く場所になります。
ヘッダーの幅は初期値で980px(ピクセル)なので、今回はそのまま利用♪
ヘッダーの高さは任意で設定できるので、好きな大きさの画像を作ってください。
↓こんな感じの画像を作ってみました。
それでは、ヘッダー画像を表示させる手順です。
1.メニューの[①ブログを書く]→[②デザインの変更]→[③CSSの編集]を選択。
2.(1)「①ブログデザインヘッダ・背景用画像の追加」より画像をアップロード
(2)②にアップされた画像を確認
(3)③に表示された画像のURL(画像の場所を示すアドレス)を確認
3.2と同ページの下部の「現在使用中のブログデザインCSS」の中のCSSを編集します。
(1)CSSをスクロールして、「(3-2) ブログヘッダー」を探してください。
4.下記のように書き換えて、下部の保存ボタンを押してください。
【変更前】
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
【変更後】
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:278px;/*作成した画像の高さを指定*/
background-image:url(画像のURL);/*画像の場所URL*/
background-repeat:no-repeat;/*画像のリピート無し*/
background-position:top center;/*画像の位置は上寄せ・中央寄せ*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */
ちなみに画像のURLは2-(3)にて表示されたURLを利用してください。
サンプルブログ(http://ameblo.jp/sample-01/ )の場合はこうなっています。
【変更後】
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:278px;;/*作成した画像の高さを指定*/
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20111103/17/68/b2/j/o09800278sample-011320307717810.jpg);/*画像の場所URL*/
background-repeat:no-repeat;/*画像のリピート無し*/
background-position:top center;/*画像の位置は上寄せ・中央寄せ*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */
これでヘッダー画像が追加されました。
ヘッダーに写真が入るだけでかなり雰囲気が変わりますね。
画像のURL指定ですが、上記ではアメブロにアップして利用する方法を用いましたが
アメブロにアップすると大きい画像の場合、画質が劣化することがあります。
もし既にホームページをお持ちの場合はそこに画像をアップしてURLを指定するほうがいいかもしれません。
【変更箇所】
background-image:url(http://www.自社のドメイン.com/フォルダ名/画像名.jpg);/*画像の場所URL*/
画像とブログタイトル&説明文が重なっているので、
次回ブログタイトル位置と、説明文の位置調整を行います(*・▽・)ノ















