*

商品写真の上に文字や画像を重ねる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

関連記事

カットしても良い

忙しくなってきたら重要でないことからカットする手法

ネットショッピングで珍しく「銀行振込」で購入しました。カードが使えないお店です。なぜカードが使えない

記事を読む

no image

ピア・プレッシャー(同化圧力)とは

18時。 定時終わりで、「さぁ帰ろう」と思うけど、周りはみんな定番の残業を黙々と。 帰り

記事を読む

php無理

phpプログラミングは果てしないのであきらめた

「phpでプログラミングができたらどんなにいいか。APIを使っていろんなことができるし。」という思い

記事を読む

アンケート

アンケートに答えたらサービスがよくなった

アンケート(enquête)はフランス語で、英語ではSurvey、questionnaireと言うら

記事を読む

ハミングバード

ハミングバードを知らないあなたは・・・

「ハミングバード」と聞いて「何それ?」というあなたは相当遅れています。本日学んだ専門用語、英語で言う

記事を読む

楽天ID決済

楽天ID決済導入!楽天ユーザーが取り込めるチャンス!

Eストアー(ショップサーブ)からのニュースレターで大事なトピックを見逃してました。 なんと!い

記事を読む

トップページ

yahoo! shoppingレイアウトが3カラムの場合のトップページのHTMLの編集

幅950pxでレイアウトを3カラムにした場合、サイドナビ180px、スペース10px(✕2)、右側サ

記事を読む

縮図

ネットショップビジネスは起業の縮図?

リアルのどんなビジネスでも、だいたい4ステップのマーケティングでビジネスが成り立ってると言います。

記事を読む

CPI

レンタルサーバーの時代はもう終わった

レンタルサーバーを借りてネットショップを作ったりホームページを作ったりしたい人が、2004年に100

記事を読む

自分で作成

「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイトを作りたい。」という方へのアド

記事を読む

Adsense

Adsense

初めてのメルカリ
初めてのメルカリショッピングで

ネットショップ運営者とは言え、C業界人ですからね。EC業界のことは広く

ハッシュタグとは
ハッシュダグとは

SNSが盛んになっているにもかかわらず、あまり活用していないのもあって

メルカリ3
メルカリ初心者が学んだ3つのこと

たまに使うメルカリについて学んだことが3つあったので記録しておきます。

商材見っけ
トップセラーで商材見っけ!

仕入れ0.01掛けから7掛けまでの商売をしていると、それ以下の掛け率の

no image
スマホだけでネットショップ運営

「当日は、このメールをプリントしてお持ち下さい。」なんてありますよね。

→もっと見る

PAGE TOP ↑