ヘッダー画像の設定の仕方 | ビーフリースタッフのブログ

ビーフリースタッフのブログ

ビーフリースタッフによるブログです。

アメブロのカスタマイズをするには、簡単カスタマイズという機能もありますが、私が利用しているのはスタイルシートを直接変更する方法です。



ビーフリースタッフのブログ


【1】デザインの変更

【2適用中のデザイン「CSS編集用デザイン」

【3】CSSの編集をクリック


クリックすると編集画面が出ます。



まずはヘッダー(タイトル部分)に使用したい画像をアップロードします。

アップロードすると画像のURLが表示されます。

そのURLは以下で使用します。


画像のアップローダーの下にあるスタイルシートが修正できる

ウィンドウがあります。

ここを修正するとスタイルシートが適応され、ブログデザインの変更ができます。


それでは、ブログのヘッダー画像の変更をしましょう!


ずずっと見ていると

/* (3-2) ブログヘッダー
--------------------------------------------*/

という記述があらわれます。


今回変更するのはここです。

以下のように変更します。



/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://×××××××.jpg );
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */


ここで使用するURLが、最初にUPした画像のURLになります。

コピーして貼り付けてください。


heightは画像の高さです。

アップロードした画像の高さに変えてください。


気をつけるのは「;」マークです。

これがなかったり、最後の「}」がなかったりするとスタイルシートが反映されません。


うまくいかないときはチェックしてください。