*

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

恒例になりつつある月末検索ワードをネタにしたライティング

netsea 評判 netsea(ネッシー)は、いわゆるBtoBサイトです。仕入れしたい個人事業や

記事を読む

yahooトップテンプレート

yahoo! shoppingトップページ用HTMLテンプレート

yahooさんが用意してくれてもいいのに、無いのがトップページ用のカテゴリー一覧のテンプレート。無い

記事を読む

12月1日~BASEユーザーはエスクロー決済が必須

エスクローとは、簡単に言えば決済の仲介です。BASE株式会社がエスクローを始めるということは、決済の

記事を読む

ショッピングカート

「共同購入(CGI)」役目終える

サイト引越しのときのCGIの断捨離中に共同購入のCGI(共同購入システム3 coopbuy3.cgi

記事を読む

no image

オリジナル商品の価格の決め方5つのポイント

メーカーが希望小売価格を決めている場合は、それを元に販売価格を決められますが、オリジナル商品となると

記事を読む

画像検索

商品写真だけの一覧ページを作りたい

店舗内の商品検索は、品名や品番など「テキスト(文字)検索」が基本。 でも、商品数が多いと、テキ

記事を読む

売れない理由

ショップサーブで売れない場合の3つのチェックポイント

「ショップサーブ 売れない」という検索ワードがほぼ定番化してしまいました。おそらく、「ショップサーブ

記事を読む

CRM

顧客管理にはいろいろあるけれどネットショップのCRMは?

ひとことに顧客管理(CRM)と言っても、その意味はさまざまなんですよね。例えば、売上だけ見てあれ

記事を読む

no image

ハード・トゥ・ゲット・テクニックの意味

ハード・トゥ・ゲット・テクニックとは、「アナタだけに」という特別感で相手の自己重要感を刺激して好意を

記事を読む

アプリスキル

アプリ開発の技術くれ

S-chop(スコップ)というアプリをご存知でしょうか。 『スマートフォンに搭載されているイン

記事を読む

Adsense

Adsense

ショートカット
企業の通販部門は急がば回らない。その道のプロを頼ってショートカットを。

趣味で習い事をしている人も多いと思いますが、何かを始めるときに「その道

ネットマーケティング
実店舗ビジネスもホームページにFBにInstaにとネットマーケティング全開

「美容室を開業した。ホームページを作った。」 以前は、実店舗のホ

儲かるネットビジネス
儲かるネットビジネス見っけ

儲かる(たぶん)ビジネス見っけました。 それは、ずばりフォー

セレクトショップ開業
リアル(実店舗)のセレクトショップ開業方法について

リアルのビジネスを始めようと思ったとき、誰もが、まずはネットで情報

検索キーワードは検索ユーザーとの対話
検索キーワードはユーザーとの対話

GAのオーガニック検索のキーワードの取得がほとんどできなくなって久しい

→もっと見る

PAGE TOP ↑