新 ヘッダーをオリジナルに変える方法

ヘッダーをオリジナルに変えよう

アメーバーさんのシステム変更にともない、ヘッダーの変更方法も変わりました。

当ブログでは、スタンダードのカスタマイズのみです。

ベーシックは、やっていませんので、ご了承下さい。

・　準備

ヘッダーを準備して　ヘッダーのサイズを確認して下さい。

サイズは、pxです。

・　スキンを選びます。

デザインの変更ページで　スキンを　スタンダードを選んで下さい。

　スタンダードは、この4色あります。

スタンダードを選んだら

▶　スキンの選択　　▶　スキンcssの編集を　クリックして下さい。

・　画像を読み込みます。

赤枠　□　で画像を読み込みます。　

　 　このようになります。

・　ヘッダーの変更をします

貼りつけたい画像の大きさに合わせ、ヘッダー部分のサイズの変更をします。

　　赤枠　□　横幅のサイズを変更して下さい。
　

　　赤枠　□　の縦のサイズを変更して下さい。

サイズの変更が済んだら、ヘッダーのURLを入れるための css　を追記します。

シートの一番下　　この部分の下に　css　を追記します。

　下のcssを　コピペで　貼り付けてください

#header {
background-image: url();
}

()　の部分にヘッダへのURLを貼り付けます。

ヘッダーのURLとは、　　　赤枠　□　部分のです。

この、部分を　()　のなかに　コピペすると　　こうなります。

#header {
background-image: url(http://img0.photo6.ameba.jp/r/rabbitmama/org/0895dNw82wyu90Iuy81INw.gif );
}

ここで、保存前に表示を確認して下さい。

幅は、800px　以上でも入れられるようです。

・　ヘッダーの大きさを変更したら　記事枠の大きさも変更しましょう。

初期状態で　幅は　760pxで設定されています。

それに合わせ、左右のカラムは、それぞれ　170px　記事枠は　400pxです。

ヘッダーの大きさが、800px　にしたら　記事枠を　440pxに増やします。

ヘッダーの増えた分、記事枠を増やして下さい。

赤枠　□　　ブログ全体の　サイズ

青枠　□　　記事部分　の　サイズ

緑枠　□　　左　カラムの　　サイズ

黄枠　□　　右　カラムの　　サイズ

　　　　　　　　　　　　　　　　　　 ランキング参加中　

　　　　　　　　　　　　　　　　お役に立てましたら　ポチッとお願い致します。

　　　　　　　　　　　　　　　　　みなさまの、ワンクリックが　励みになります。