色バックに画像を配置して白文字にしたい

ＣＳＳ（スタイルシート）編 #練習用
簡単に色バックに画像を配置して白文字にする【緑枠の中のタグをコピペすれば使えるよ】

Wiki文法使用に必ずチェックしてください


イメージ 1 愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ　愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　愛犬レディ愛犬レディー　愛犬レディ愛犬レディ愛犬レディー　　　

||<#009900'style='width:530px;color:white'``attached(３,right) 愛犬レディー・・・・||
　　　↑背景色指定　　　             ↑文字色指定　　　↑半角数字で入力
　　　　　　　　　　　　　　↑【このタグをコピペすればすぐ使えるよ】↑　　
●文章は画像の下に流し込まれます。　　
●任意の位置で改行したい場合 ;word-spacing:530px を追加して改行したいところに全角スペースを入れる。||<#009900'style='color:white;word-spacing:530px'``　と書く。

カシオLV-10カシオLV-10カシオLV-10カシオLV-10カシオLV-10カシオLV-10カシオLV-10　イメージ 2　カシオLV-10　カシオLV-10カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10　カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 カシオLV-10 

||<#993333'style='width:530px;color:#ffffff'``カシオ・・・attached(２,left) カシオLV-10・・・||
　　　↑背景色指定　　　　              ↑文字色指定　　　　　　　　　↑半角数字で入力
　　　　　　　↑【このタグをコピペすればすぐ使えるよ】↑
●文章は画像の下に流し込まれます。
●文中に入れることも可能です。(center指定は左右に流し込みません。画像の上と下になります。)
●任意の位置で改行したい場合 ;word-spacing:560px を追加して改行したいところに全角スペースを入れる。||<#009900'style='width:530px;color:white;word-spacing:530px'``　と書く。
●１個のセルに画像は１個しか貼れません。セルの長さは文字数によって変化します。表組みにすると一番長いセルに合わせます。表組みにする時は画像の大きさを同じサイズにすると良いです。表組みのやり方参照
●残念ながらこのレイアウトでは拡大表示は出来ません 。（イメージデータを直接リンクすれば出来るかもしれません。未確認）

↓↓↓↓●画像サイズが530px（ブログのページの最大値）より大きい場合は下のようになります。↓↓↓↓
　　　　　　●この方法は元画像が560ピクセル以上あればクリックすると元のサイズに拡大します。 　　　

ニコン イメージ 3 ニコンクールピクス2500 ニコンクールピクス2500 　ニコンクールピクス2500　ニコンクールピクス2500　ニコンクールピクス2500　

||<#000000'style='width:530px;color:#ffffff;font-size:16px'``ニコン attached(３) ニコンクールピクス2500 ニコンクールピクス2500ニコンクールピクス2500ニコンクールピクス2500ニコンクールピクス2500ニコンクールピクス2500ニコンクールピクス2500ニコンクールピクス2500||　←【このタグをコピペすればすぐ使えるよ】
●任意の位置で改行したい場合 ;word-spacing:530px を追加して改行したいところに全角スペースを入
れる。
●文字を大きくしたい場合　;font-size:20px　　

ニコン　イメージ 3　ニコンクールピクス2500　●|4本でセンタリングコンクールピクス2500　●|4本でセンタリングニコンクールピクス2500　●|4本でセンタリングニコンクールピクス2500　●|4本でセンタリング　

||||<#ffff00'style='width:530px;color:#0000ff;font-size:20px;word-spacing:575px'``ニコン attached(３) ニコンクールピクス2500・・・・||
●||||でセンタリング　　　　　　　　↑【このタグをコピペすればすぐ使えるよ】
●任意の位置で改行したい場合 ;word-spacing:530px を追加して改行したいところに全角スペースを入れる。
●文字を太く大きくしたい場合　;font-size:20px　　
背景色、文字色はカラーサンプルで好きな色を選んでください　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
カラーサンプル
カラーネーム色見本


(C)京都写真日記：Wiki文法を使いこなそう