*

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

関連記事

ショップサーブ

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

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

記事を読む

no image

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

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

記事を読む

アマゾン

もう、ネットショッピングはアマゾンと専門店だけで良いのかも

今月だけで8件ほどアマゾンで買い物をしています。消耗品やIT関係の機器などです。アマゾンは注文手続き

記事を読む

コンバーター

楽天・yahoo shopping・ショップサーブコンバーター

コンバーターとは変換器のこと。例えば、「楽天からヤフーに引っ越ししたい」という場合、トラックに荷物を

記事を読む

売れない

ショップサーブは売れない?いいえ。それは違います。

「ショップサーブで出店しても売れないのではないか?」と疑問に思っているあなた。 その質問自体が

記事を読む

ショップサーブメールフォームは使うな

これはリアルにヤバイ。最強すぎるメールフォームCGI(4万円相当が無料!)

今回はちょっと中級レベルのお話です。 お客様が問い合わせをする際のページですが、一般的

記事を読む

チェックボタン

【要望】カート最終ページに規約に同意するチェック欄

ブログ引っ越し後、初のEストアーに要望シリーズ。 映画のチケットをネットで購入した時にある、最

記事を読む

画像検索

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

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

記事を読む

売却

譲渡目的でECサイト(ネットショップ含む)を作る件

「ネットショップ、あるいは、ブログやアフィリサイトなど、収益を生むサイトを作ってそれを売却する」とい

記事を読む

メンテナンスフリー

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

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

記事を読む

Adsense

Adsense

海外輸入
ド素人でも海外仕入れを簡単にできる方法(輸入が熱い!?)

普段は迷惑メールフォルダに仕分けられるであろうメールが受信ト

楽天退店
楽天退店。ちょっと待った!感情的な退店はキケン。

久々に楽天のニュースが出でましたね。楽天は楽天でも、一般消費

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

→もっと見る

PAGE TOP ↑