*

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

関連記事

業務用卸販売

一応、卸会員サイト化にはできるが・・・

2月末のショップサーブのニュースを今知ったんですが(遅っ)、なんと!「BtoB、業務用卸売、会員専用

記事を読む

モーダルウィンドウ

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィン

記事を読む

改善希望

管理画面のユーザリビリティーの向上を

Eストアー(ショップサーブ)に要望! 昔から思っていたこと。誰も指摘していないのか?それとも、

記事を読む

jQuery外部ファイル

外部HTMLファイルをjQueryで読み込んでも表示してくれない2つの原因

古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどで

記事を読む

乗り換え

カラーミーからショップサーブへ0円で引っ越し

「長年カラーミーでやってたけど、そろそろもっとスペックの高いショップサーブに乗り換えようかしら?」

記事を読む

ブラックリスト

カラーミー ブラックリスト登録方法

注文を受けて商品を出すと必ずトラブルになる。」 そんな客はブラックリストに登録して注文

記事を読む

悪い評価

悪い評価をつけられてイラっとする運営者はリテラシーの低い客と同レベル

「○○急便のドライバー対応が悪かった。★☆☆☆☆」 「連絡が遅い。★☆☆☆☆☆」 「届い

記事を読む

サイドナビ

yahoo! shopping サイドナビの編集

動画付き解説版できました~ デザイン設定で、「とりあえずお店らしく」と考えた場合、ヘッダー

記事を読む

ショップサーブ

ショップサーズのページ編集がしやすく(画像アップのコツ)

ショップサーブからのお知らせがきました。 今回の新機能は、APIや自動受注などいろいろあります

記事を読む

ショップサーブ・CSSカスタマイズ

最初にやっておきたい、ショップサーブ・スマホサイトCSS基本カスタマイズ5ヶ所

ショップサーブのスマホ・テンプレートですが、個人的にはイマイチ・・・。 ただ、カスタマイズ

記事を読む

Adsense

Adsense

ショップサーブ・CSSカスタマイズ
最初にやっておきたい、ショップサーブ・スマホサイトCSS基本カスタマイズ5ヶ所

ショップサーブのスマホ・テンプレートですが、個人的にはイマイチ・・

park終了
9月30日Eストアー「park.jp終了」の裏事情!?と通販サイトの二極化

ショップサーブにとっては、棚ボタ的な広告サービスだったEストア

商品写真
商品のメイン写真にはベネフィットのベストポイント・イメージを

「バナーを作らねば・・」ということがあって、度々参考にするショップサー

差別化
ランディングページに必ず盛り込みたい差別化を最大化するテクニック

(A)特待生で入学したAさんは、オリンピックで金メダルを取りました。

プラグイン3選
ネットショップのWordPressに必ず入れたいプラグイン3選

ネットショップのブログでコンテンツを配信し、また、その場で商品

→もっと見る

PAGE TOP ↑