css変更 ヘッダー背景 | TW復帰者のブログ

TW復帰者のブログ

オンラインゲーム Tales Weaver (略してTW) にこっそり復帰しました。数年ぶりのTWでの浦島太郎っぷりを書き綴ります。

他の方のブログで気づいたのですが…

今はアメブロのcss編集とかできるのですね。


今月中にcssカスタム可能デザインに変更すると

アメゴールド?があたるとかなので変更してみました。



まずはヘッダー部分に手を入れることに。

さら~っとcssの中身を見て、ヘッダー部分を探します。



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


 /* skinHeaderArea ブログヘッダー980pxエリア */
 .skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */



ありました。丁寧にコメントついていますね。


適当に画像を用意します。

横幅初期値が 980px だそうなので

980px×170px で作って、アップロード。


夢の兎


かっこ{}の中にアップロードした画像を指定します。


 background-image:url(画像のパス 長いから省略);


どうやら、元の高さは170pxもないらしく途中で切れちゃいました。
なので、高さを指定します。


 height:170px;


これで、高さはいい感じになりました。

カレンダー部分がヘッダーにくっついてしまっているのが気になったので

マージンを利かせて少し距離を出すことにします。


 margin-bottom:10px;


はい、いい感じにヘッダーの画像が配置されましたb

初めに見つけた緑の部分はこんな感じになっています。

青い部分が追加(変更)箇所です。


 /* skinHeaderArea ブログヘッダー980pxエリア */
 .skinHeaderArea{
 height:170px;
 margin-bottom:10px;
 background-image:url(画像のパス);
 }/* ←ブログヘッダーに背景画像を敷きたいとき */