2008年06月11日
ヘッダー画像をチェンジしてみる。
おやじっぽい灰色のスクロールバーの変更はできましたか?分からないとか、
うまく出来ないときはコメントくださいね。ブログにもお邪魔させていただきますよ。
じゃぁ、ブログ全体のイメージを左右する画像を簡単にちょちょいと交換してみましょうね♪
本当に簡単なので試してみて下さいね。
1: 使用したい画像やイメージを準備してURLを調べておく。
画像が無い場合は無料素材集などでお借りしましょうね.
2: デザインの変更よりスタイルシートを開きます。
はじめの方にこんな部分があります ↓↓↓
/*------------------------------*/
/* ヘッダータイトルに関する指定 */
/*------------------------------*/
#content #header {
/* タイトルの大きさや背景画像、文字色を定義する */
width : 760px;
height : 200px;
margin-top : 10px;
background : url("○○○") no-repeat right top;
・
・
・
上の○○○の部分に、先ほどの画像のURLを貼付します。ここで画像の表示方法と
位置指定しています。ここでの画像表示方法はno-repeatと指定しています。
他には、repeat / repeat-x / repeat-y / no-repeat などがあります。
画像の位置指定をここでは right topにしています。
他にはleft / right / center / top / bottom があります。
repeatと記入した場合 → こんな感じ
repeat-xと記入した場合 → こんな感じ
repeat-yと記入した場合 → こんな感じ
no-repeatと記入した場合 → こんな感じ
上では位置指定をしていない状態です、画像表示方法に合わせて位置指定をしてね。
試してみてね。うまく変更できたらコメントいただけたら、ブログにおじゃましますね♪
うまく出来ないときはコメントくださいね。ブログにもお邪魔させていただきますよ。
じゃぁ、ブログ全体のイメージを左右する画像を簡単にちょちょいと交換してみましょうね♪
本当に簡単なので試してみて下さいね。
1: 使用したい画像やイメージを準備してURLを調べておく。
画像が無い場合は無料素材集などでお借りしましょうね.
ファンブログの新記事作成で作っちゃいましょう。記事記入欄の右上の 「画像/ファイル」でファイルをアップロードします。普通に記事欄に挿入して 下にプレビューされた画像の上で右クリックしてプロパティを開きアドレスURLを コピーして、記事欄に貼付しておく |
2: デザインの変更よりスタイルシートを開きます。
はじめの方にこんな部分があります ↓↓↓
/*------------------------------*/
/* ヘッダータイトルに関する指定 */
/*------------------------------*/
#content #header {
/* タイトルの大きさや背景画像、文字色を定義する */
width : 760px;
height : 200px;
margin-top : 10px;
background : url("○○○") no-repeat right top;
・
・
・
上の○○○の部分に、先ほどの画像のURLを貼付します。ここで画像の表示方法と
位置指定しています。ここでの画像表示方法はno-repeatと指定しています。
他には、repeat / repeat-x / repeat-y / no-repeat などがあります。
画像の位置指定をここでは right topにしています。
他にはleft / right / center / top / bottom があります。
repeatと記入した場合 → こんな感じ
repeat-xと記入した場合 → こんな感じ
repeat-yと記入した場合 → こんな感じ
no-repeatと記入した場合 → こんな感じ
上では位置指定をしていない状態です、画像表示方法に合わせて位置指定をしてね。
試してみてね。うまく変更できたらコメントいただけたら、ブログにおじゃましますね♪
この記事へのコメント