netshop10商品写真の上に文字や画像を重ねるCSSツイートシェアはてブLINEPocketこの記事は約5分で読むことができます。沖縄旅行にテンション上がりまくりの女の子ちゃん商品写真に文字を入れる場合、基本的にはフォトショップやイラレ(イラストレーター)、あるいは、他の画像ソフトを使います。これがいちいち面倒なんですよね。そこで、CSSを使って簡単に画像の上にテキストや画像を重ねる方法を紹介します。これは、ショップサーブでも使えるしヤフーショッピング(CSS3が普通に可!)でも使えるので、おぼえておくと、とても便利ですよ。メインの商品写真ではなく商品説明文(フリースペース)の中に貼り付ける画像に使えます。style=”position:relative;width:550px;“>~</div>として、画像の上に文字を配置するエリアの設定を行います。このDIVボックスの中に配置したいものを入れて行きます。背景になる、つまり、重なりが一番下になるものを普通に<img>タグで呼び出します。width=”550′′>3.上に重ねるテキストや画像の座標を指定ここからがポイントです。背景画像の上に座標があると考えて、例えば、左から10、上から20のところに文字を配置する。」と言った指定をします。そのときに使うCSSが「position:absolute」です。それにプラスして、座標を入れます。座標については、上から(top)、下から(bottom)、左から(left)、右から(right)というお馴染みの単語です。style=”position:absolute;top:10px;left;20px;“>座標が見えないので、最初はなんとなく数字を入れて、プレビューで見ながら調整していくと良いでしょう。トップの画像は何の加工もしていない写真ですが、上にさらに画像1枚(上)と下にはテキストを重ねています。商品の補足説明などにも使えますし商品写真の盗用防止にも役立つかもしれませんね。トップイメージのHTMLは以下の通りです。#ffffff;”>初めての沖縄旅行にテンション上がりまくりの女の子ちゃん</div></div>テキストを重ねる場合は<div>を使います。何箇所でも配置できるのが便利です。動画風イメージを作る方法でも同じCSSを使っています。このページでは、背景にGIFアニメーションを配置して、その上に文字を重ねています。今後10年でなくなる仕事を目の当たりにして実感した3例RECOMMENDこちらの記事も人気です。ショップサーブ2019.6.20メルマガは無料販促の定番、しかもHTMLメールが基本!もちろん0円で。副業で個人事業主を始める人が気を付けるべき点2020.02.20東京オリンピック特需への便乗想定。ネット通販店がやるべき、たった1つの対策。2020.02.18今後起業するなら、外したくない97%確実に儲かる6つの条件2020.02.16個人事業主は楽しい確定申告。収入ある人もない人も。