商品写真に文字を入れる場合、基本的にはフォトショップやイラレ（イラストレーター）、あるいは、他の画像ソフトを使います。でも、これがいちいち面倒なんですよね。そこで、CSSを使って簡単に画像の上にテキストや画像を重ねる方法を紹介します。
これは、ショップサーブでも使えるしヤフーショッピング（CSS3が普通に可！）でも使えるので、おぼえておくと、とても便利ですよ。ただし、メインの商品写真ではなく商品説明文（フリースペース）の中に貼り付ける画像に使えます。
１．重ねるエリアに「position:relative」を指定する
<div style=”position:relative;width:550px;“>～</div>として、画像の上に文字を配置するエリアの設定を行います。このDIVボックスの中に配置したいものを入れて行きます。
２．背景となる写真は普通に<img>入力
背景になる、つまり、重なりが一番下になるものを普通に<img>タグで呼び出します。
<img src=”http://hogeracco.se3.shopserve.jp/pic/hoge.jpg” width=”550″>
３．上に重ねるテキストや画像の座標を指定
ここからがポイントです。背景画像の上に座標があると考えて、例えば、左から10、上から20のところに文字を配置する。」と言った指定をします。そのときに使うCSSが「position:absolute」です。それにプラスして、座標を入れます。
座標については、上から（top）、下から（bottom）、左から（left）、右から（right）というお馴染みの単語です。
<img src=”../pic/oresan.jpg” style=”position:absolute;top:10px;left;20px;“>
座標が見えないので、最初はなんとなく数字を入れて、プレビューで見ながら調整していくと良いでしょう。
トップの画像は何の加工もしていない写真ですが、上にさらに画像１枚（上）と下にはテキストを重ねています。商品の補足説明などにも使えますし商品写真の盗用防止にも役立つかもしれませんね。
トップイメージのHTMLは以下の通りです。
<div style=”position: relative; width: 550px;”>
<img src=”背景.png”>
<img src=”重ねる画像.png” style=”position: absolute; left: 40px; top: 10px;”>
<div style=”position: absolute; left: 40px; bottom: 40px; font-size: 120%; color: #ffc0cb; background-color: #ffffff;”>初めての沖縄旅行にテンション上がりまくりの女の子ちゃん</div>
</div>
テキストを重ねる場合は<div>を使います。何箇所でも配置できるのが便利です。
動画風イメージを作る方法でも同じCSSを使っています。このページでは、背景にGIFアニメーションを配置して、その上に文字を重ねています。LP（ランディングページ）のファーストビューに使える場合があるので、オススメのテクニックだと思いすよ～
使っているページ
ヤフーショッピングの画像や編集方法
