*

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

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

この記事は約5分で読むことができます。

沖縄ガール
沖縄満喫

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

商品写真に文字を入れる場合、基本的にはフォトショップやイラレ(イラストレーター)、あるいは、他の画像ソフトを使います。でも、これがいちいち面倒なんですよね。そこで、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

関連記事

ネットショップは電話対応しない

「ネットショップは電話対応しないのが基本」の法則

ネットショップが電話を受け付けない3つの理由といった定番記事があります。10年近くも前の2008年モ

記事を読む

TVショッピング

テレビショッピングは販売の仕掛けなど見どころ満載

テレビショッピングと言えばショップチャンネル。日本初のTV通販番組として1996年に設立された会社で

記事を読む

売れてるお店

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

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

記事を読む

クロスセリング

クロスセリング(ついで買い)テクニックを導入する方法

マーケティング用語「クロスセリング」。日本語で言えば「ついで買い」。古くは、ハンバーガーチェーンの「

記事を読む

バリエーション売上げアップ

ショップサーブのバリエーションを使った売上アップテクニック

バリエーションの使い方で、わかりやすい例は、「同じ柄のTシャツでサイズ展開(S、M、L、XLや、白、

記事を読む

通販アプリ

個人でネット販売を始めるには通販アプリが簡単

そうなんですよね~。今は、スマホやタブレットのアプリで個人通販が始められる時代です。おそらく、通販ア

記事を読む

アプリ開発

CGIやPHPアプリ開発前に依頼者が理解、習得しておくべきこと

ネットショップ開業と同じく、一発当てられる可能性を秘めているスマホアプリ、CGIやPHPアプ

記事を読む

呪縛からの開放

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

ネットショップを開業している人にとっては、当たり前のASP(通販システム)。かつては、「無料で作る」

記事を読む

メンテナンスフリー

ショップサーブはメンテナンスフリーだから運営が楽ちん

ショップサーブに引っ越しして何年になるでしょうか。 「ネットショップは自作に限る」という固定観

記事を読む

壁掛けテレビ

ネットショップ繁盛の方法は繁盛店に学ぶ

壁掛けにできるくらいの薄型テレビを購入しました。ただ、そこには壁掛け用の金具は付属していないんですね

記事を読む

Adsense

Adsense

サポートの品質
サポートの品質で企業の正体がバレてしまう。

ネットショップ1店舗の引っ越し先として検討していた某社。気にな

簡単に取れて稼げる資格
簡単に取れて稼げる資格

税理士の資格を取れば税理士として商売ができるけど独学では難しい

固定費0円
クレジット決済手数料が安い・固定費が無料や安いサービス5選

あっちこっちにネットショップを作っていると大変です。ある通販サ

5つの鉄則
ネットショップ成功の秘訣5つの鉄則

ビジネスとはあまり関連のない教育ジャンルで、とてもいい記事があ

スマホ対応レスポンシブ化
コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知の

→もっと見る

PAGE TOP ↑