広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

枠の中の背景に画像を使いたい!

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

参考記事: ファンブログでアップロードした画像の場所(画像URLの調べ方)

枠の中にも書きましたが、背景は風と樹と空とフリー素材さんのものを使わせていただきます。素敵な素材ですね。

ではいきなり、上のソースです。

なお、このページの実際のソースでは自動改行を排除するため、下のコードを改行せずに書いています。詳しくはブログの自動改行問題をご覧ください。

<div style="border:3px solid #0000ff;padding:1em;height:177px;background:url('/ayzfqir5/file/12/YmdfZnV1c2VuX2swM-_B.gif') no-repeat left top;text-align:right">
<div style="margin-top:12.5em">
<span style="color:#0000ff;font-weight:bold">今回のお題「枠の中の背景に画像を表示させたい!」</span>
背景は<a href="http://kaze-sora.com/" title="風と樹と空とフリー素材" target="_blank">風と樹と空とフリー素材</a>さんのものを使わせていただきます。
</div>
</div>

チョー見づらいので赤い部分を分けます。

border:3px solid #0000ff;
padding:1em;
height:177px;
background:url('画像ファイルのURL') no-repeat left top;
text-align:right;

borderとpaddingはもう説明しました。新しいのは、height、text-align、それからbackgroundの右側ですね。

枠の高さと横幅

まず、height:177px

これは使わせていただいている画像の高さが177px(ピクセル)なので、それに合わせます。合わせないとどうなるか、やってみます。

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

む!特に問題なく見える。さっきは画像より枠が大きくて、上に白い余白が出てたんですけどね。まあ、いいか。もし困った時は画像のサイズに合わせてみてください。

本当は、高さだけでなくwidth(横幅)も指定したいんですが、このブログでは設定できませんでした。(書いても効かない)

今回の画像は右側が白いのでわかりませんが、実はこの画像左に寄っています。だからもし画像の色が白くなかったら、画像の横幅が終わったところで、ブッツリと色が変わります。ファンブログで背景画像を使う場合は、そういった条件も加味して素材を選んだほうが苦労しません。たぶん。

ただこれはサーバの問題ではなくスキンの問題ですね。スキンのCSSを正しくいじれば効くようになるでしょう。だから、他のスキンを使っている方はwidthの指定が有効かもしれません。

続いて、background:url('画像ファイルのURL') no-repeat left top;これは

url()のかっこの中の画像を
枠の左上合わせ(left top)
繰り返さず(no-repeat)に表示して


という意味です。

画像の位置指定

位置の指定はtopとbottom(上か下)
leftとright(左か右)
で指示します。

右上あわせ background:url('画像ファイルのURL') no-repeat right top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

左下あわせ background:url('画像ファイルのURL') no-repeat left bottom;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

画像の繰り返し

repeat 繰り返す
no-repeat 繰り返さない
これは下の表示を見れば説明はいらないでしょう。

←元の画像

繰り返す background:url('画像ファイルのURL') repeat left top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

繰り返さない background:url('画像ファイルのURL') no-repeat left top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字位置の指定

今日の記事は次の、ext-align でおしまいです。

画像に合わせて、文字の位置をずらしたい時があります。今回は、右寄せ、左寄せ、真ん中合わせの方法。上下の配置はやりません。

文字の右寄せ text-align:right

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字の左寄せ text-align:left

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字の真ん中合わせ text-align:center

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

新ブログ「Big Bang」で続きを読む