オリジナル画像に変更（タイトル・壁紙篇） [ソネットブログカスタマイズ]
前回壁紙の色を変更しました。
今度はオリジナルの画像をタイトルに入れていきます。
まずは横幅770のタイトル画像を作成します。770じゃなくても構いませんが記事内の部分やサイドバーの枠とのバランスが崩れてしまうのでまずは横幅770の画像を作成してみましょう。縦の高さはいくつでもＯＫです。
カスタムスキンを開いて下さい。（ここまでは前回壁紙参照）
画像が出来たらＵＰしよう！
| @charset "UTF-8"; /*-----Common-----*/ 省略 /*-----Header-----*/ 省略 #banner { height:100px; padding:0 20px; background:#d0ceb7; clear:both; } #banner h1{ |
今日はこの赤字の部分のお勉強ですｗ今回私はタイトル画像に↓を入れていきます。
大きさは横幅770px 縦が200pxのものを使用します。
①の部分を囲んで②の画像をクリックします。
そうすると、さっき記述してあった
background:#d0ceb7;
が消えて、↓に変わります。
| #banner { height:100px; padding:0 20px; background:url(/blog/_images/blog/_d8f/●●/●●.gif) no-repeat; clear:both; } |
「height:100px;」とは高さが100pxですよ～って事なので、これを自分の画像の高さに書き換えます。私はさっき作成したタイトル画像の高さが200pxなので、height:100px;をheight:200px;に書き換えます。保存を押し自分のブログを確認してみて下さい。
これだけでかなり生まれ変わります。ちなみに背景を画像にしたい場合は、
前回壁紙の記述をタイトル画像と同じように変更すれば背景も画像に変わります。
body {
background:#ffcccc;
}
を
body {
background:url(/blog/_images/blog/_d8f/chocolaboo/8641959.gif) no-repeat;
}
にタイトルと同じように書き換えます。がこのままだと「no-repeat;」（繰り返さない）が記述されているのでno-を消してしまいましょう。
|
body { |
背景画像を縦一列に並べる時はno-repeat;の変わりに、repeat-y;を付け足します。
|
body { |
そうすると↓のように背景画像が敷き詰められたり縦一直線に並んだりします。自分の壁紙のタイプに合わせて指定してみるといいと思います。ちなみに、横一直線はrepeat-x;をno-repeat;の変わりに記述します。
