*

商品写真の上に文字や画像を重ねるCSS

公開日: : 最終更新日:2017/07/25 CSSやHTML、CGI, ショップサーブ

沖縄ガール
沖縄満喫

初めての沖縄旅行にテンション上がりまくりの女の子ちゃん

商品写真に文字を入れる場合、基本的にはフォトショップやイラレ(イラストレーター)、あるいは、他の画像ソフトを使います。でも、これがいちいち面倒なんですよね。そこで、CSSを使って簡単に画像の上にテキストや画像を重ねる方法を紹介します。

これは、ショップサーブでも使えるしヤフーショッピング(CSS3が普通に可!)でも使えるので、おぼえておくと、とても便利ですよ。ただし、メインの商品写真ではなく商品説明文(フリースペース)の中に貼り付ける画像に使えます。

1.重ねるエリアに「position:relative」を指定する

<div style=”position:relative;width:550px;“>~</div>として、画像の上に文字を配置するエリアの設定を行います。このDIVボックスの中に配置したいものを入れて行きます。

2.背景となる写真は普通に<img>入力

背景になる、つまり、重なりが一番下になるものを普通に<img>タグで呼び出します。

<img src=”http://hogeracco.se3.shopserve.jp/pic/hoge.jpg” width=”550″>

3.上に重ねるテキストや画像の座標を指定

ここからがポイントです。背景画像の上に座標があると考えて、例えば、左から10、上から20のところに文字を配置する。」と言った指定をします。そのときに使うCSSが「position:absolute」です。それにプラスして、座標を入れます。

座標については、上から(top)、下から(bottom)、左から(left)、右から(right)というお馴染みの単語です。

<img src=”../pic/oresan.jpg” style=”position:absolute;top:10px;left;20px;“>

座標が見えないので、最初はなんとなく数字を入れて、プレビューで見ながら調整していくと良いでしょう。

トップの画像は何の加工もしていない写真ですが、上にさらに画像1枚(上)と下にはテキストを重ねています。商品の補足説明などにも使えますし商品写真の盗用防止にも役立つかもしれませんね。

トップイメージの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(ランディングページ)のファーストビューに使える場合があるので、オススメのテクニックだと思いすよ~

使っているページ
ヤフーショッピングの画像や編集方法



Adsense

関連記事

やっぱりネットビジネス

やっぱりネットビジネスが楽しい

新しくドメインをとってウェブサイトを構築する準備中。今回は、ネットショップではなくネットビジネス。こ

記事を読む

オフグリッド

オフグリッドとオフASP

ヤフーニュースで「電力会社を解約して、太陽光発電だけで生活する人」みたいなのがありました。 そ

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

オプション

1商品にオプション10個まで設定可能

ある商品を購入するときに、カートボタンの上に「カラー」や「サイズ」を選べるやつ(プルダウン)がついて

記事を読む

売れてるお店

売れているお店は何が違うのか研究

売れているお店は何かが違う。その何かを探るため、過去にネットショップ大賞に選ばれた、各カテゴリー1位

記事を読む

納品書

ショップサーブの納品書のフォントを明朝体に変更する方法

納品書のフォントの初期設定はゴシック体です。「このフォントを変えたい!」と思っている方もいるでしょう

記事を読む

no image

残された時間は少ない!?急げ!個人事業でネットショップ開業

来年度から、決算書や確定申告へのマイナンバーの記入が義務付けされるようです。 マイナンバーのメ

記事を読む

ロリポップに

ショップサーブではなく、別サーバー「ロリポップ」でWordPressを設置する方法

ショップサーブは、通販専用のアプリです。通販サイトの運営専用で、ブログには向いていません。オプション

記事を読む

ショッピングカート

現役店長オススメのショッピングカート

見えなくて怖いこと。幽霊ではなくカゴ落ち・・・ 「せっかくお客さんが商品をカートに入れたの、そ

記事を読む

no image

現在使われていない(固定)電話番号一覧

「これ面白いサービスだな。興味あるな。」と思って資料請求をしようと、会社名、住所、電話などが必須入力

記事を読む

Adsense

Adsense

アプリスキル
アプリ開発の技術くれ

S-chop(スコップ)というアプリをご存知でしょうか。 『スマ

呪縛からの開放
無料当たり前という固定観念の呪縛かの開放

ネットショップを開業している人にとっては、当たり前のASP(通販システ

グランプリ受賞
ネットショップ大賞2016グランプリ受賞を逃す

すみません。別にノミネートされていたわけでも、声がかかったわけでも

仕事にやる気は必要か
「仕事にやる気って必要ですか?」って相談と回答を読んでみた

読売ONLINEの発言小町のとあるトピックにヒット。 「仕事

生き延びる裏ワザ
メーカーが生き残るために裏ワザ的に使える便利なWEBサービス

ネットショップでは、メーカー品をメーカーから仕入れて販売しているわけで

→もっと見る

PAGE TOP ↑