HTMLタグを使って、商品詳細ページをもっと充実させたいのですが？
「商品詳細ページ」には、ただ文字を並べただけでは、読み流されてしまう可能性が高いです。
商品詳細ページではHTMLタグが使用できますので、タグを使ってサイトの充実を図りましょう。
ホームページ制作ソフトを使うことで、テキストの色を変えたりすることが簡単にできます。
まずは文字を強調し、お客様の注意をひくことから始めてみましょう。
皆さんのなかには、ショップサーブで気軽に店の構築をしてきたため「HTMLを自分で編集するなんてムリ！」と思っている人も多いはずです。その点、ホームページ制作ソフトを使えば、ショップサーブで店作りをしている感覚で、画像を追加したり、テキストの色を変えたりすことができます。
ウェブショップの場合、お客様を獲得するためには、「お客様の使い勝手」を考慮したサイト構成であることが大切です。まずは、文字の大きさを変えたり色を変えたりすることで、商品の価格やお得情報など、絶対に伝えたい情報は目立たせる必要があります。
ぜひ専門書や専門サイトなどをチェックして、サイトの充実を図っていきましょう。
ショップサーブでウェブショップを運営し、その後、HTMLを活用して、サイトのリニューアルを行う場合、ぜひ活用してほしいのが、ホームページ制作ソフトですが、簡単なHTMLタグを以下にご案内しますので、まずは以下を参照しページ装飾を実践してみましょう。
1. 文字を強調し、お客様の注意をひく
文字を目立たせる方法には、赤や青などハッキリとした文字色にしたり、文字サイズを大きくしたりします。また太字にする、という方法も文字が強調されます。ここでは、文字をアピールさせるHTMLタグについて、ご案内します。
| 文字を太字にする | <b>より強く強調します</b> | より強く強調します |
| 文字に色をつける | <font color="#FF0000">りんごは赤いです</font> | りんごは赤いです |
| 文字を大きくする | <font size="+1">「3」が基本で、3より1段階大きいという意味</font> | 「3」が基本で、1段階大きいという意味 |
| 文字を小さくする | <font size="-2">「3」が基本で、3より2段階小さいという意味</font> | 「3」が基本で2段階小さいという意味 |
| 文字に下線を引く | <u>文字に下線をひく</u> | 文字に下線をひく |
カラーチャート（HTMLで定義されている基本色です）
この216色はセーフカラーと呼ばれ、異なる環境で見ても同じ色で表示されます。
色の指定は、半角シャープ（ # ）で始まる6桁のカラーコードを指定してあげます。
| #000000 | #003300 | #006600 | #009900 | #00CC00 | #00FF00 | ||||||
| #000033 | #003333 | #006633 | #009933 | #00CC33 | #00FF33 | ||||||
| #000066 | #003366 | #006666 | #009966 | #00CC66 | #00FF66 | ||||||
| #000099 | #003399 | #006699 | #009999 | #00CC99 | #00FF99 | ||||||
| #0000CC | #0033CC | #0066CC | #0099CC | #00CCCC | #00FFCC | ||||||
| #0000FF | #0033FF | #0066FF | #0099FF | #00CCFF | #00FFFF |
| #330000 | #333300 | #336600 | #339900 | #33CC00 | #33FF00 | ||||||
| #330033 | #333333 | #336633 | #339933 | #33CC33 | #33FF33 | ||||||
| #330066 | #333366 | #336666 | #339966 | #33CC66 | #33FF66 | ||||||
| #330099 | #333399 | #336699 | #339999 | #33CC99 | #33FF99 | ||||||
| #3300CC | #3333CC | #3366CC | #3399CC | #33CCCC | #33FFCC | ||||||
| #3300FF | #3333FF | #3366FF | #3399FF | #33CCFF | #33FFFF |
| #660000 | #663300 | #666600 | #669900 | #66CC00 | #66FF00 | ||||||
| #660033 | #663333 | #666633 | #669933 | #66CC33 | #66FF33 | ||||||
| #660066 | #663366 | #666666 | #669966 | #66CC66 | #66FF66 | ||||||
| #660099 | #663399 | #666699 | #669999 | #66CC99 | #66FF99 | ||||||
| #6600CC | #6633CC | #6666CC | #6699CC | #66CCCC | #66FFCC | ||||||
| #6600FF | #6633FF | #6666FF | #6699FF | #66CCFF | #66FFFF |
| #990000 | #993300 | #996600 | #999900 | #99CC00 | #99FF00 | ||||||
| #990033 | #993333 | #996633 | #999933 | #99CC33 | #99FF33 | ||||||
| #990066 | #993366 | #996666 | #999966 | #99CC66 | #99FF66 | ||||||
| #990099 | #993399 | #996699 | #999999 | #99CC99 | #99FF99 | ||||||
| #9900CC | #9933CC | #9966CC | #9999CC | #99CCCC | #99FFCC | ||||||
| #9900FF | #9933FF | #9966FF | #9999FF | #99CCFF | #99FFFF |
| #CC0000 | #CC3300 | #CC6600 | #CC9900 | #CCCC00 | #CCFF00 | ||||||
| #CC0033 | #CC3333 | #CC6633 | #CC9933 | #CCCC33 | #CCFF33 | ||||||
| #CC0066 | #CC3366 | #CC6666 | #CC9966 | #CCCC66 | #CCFF66 | ||||||
| #CC0099 | #CC3399 | #CC6699 | #CC9999 | #CCCC99 | #CCFF99 | ||||||
| #CC00CC | #CC33CC | #CC66CC | #CC99CC | #CCCCCC | #CCFFCC | ||||||
| #CC00FF | #CC33FF | #CC66FF | #CC99FF | #CCCCFF | #CCFFFF |
| #FF0000 | #FF3300 | #FF6600 | #FF9900 | #FFCC00 | #FFFF00 | ||||||
| #FF0033 | #FF3333 | #FF6633 | #FF9933 | #FFCC33 | #FFFF33 | ||||||
| #FF0066 | #FF3366 | #FF6666 | #FF9966 | #FFCC66 | #FFFF66 | ||||||
| #FF0099 | #FF3399 | #FF6699 | #FF9999 | #FFCC99 | #FFFF99 | ||||||
| #FF00CC | #FF33CC | #FF66CC | #FF99CC | #FFCCCC | #FFFFCC | ||||||
| #FF00FF | #FF33FF | #FF66FF | #FF99FF | #FFCCFF | #FFFFFF |
| リンクを貼る | <a href="リンクしたいURL">リンクをはる</a> | リンクをはる |
| 画像にリンクをはる | <a href="リンクしたいURL"><img src="http://ショップID.shopserve.jp/pic-labo/画像のファイル名.拡張子（jpeg / jpg / gif / png）" alt="画像の説明文"></a> |  |
| メールソフトを立ち上げ メールアドレスを宛名に入れる | <a href="mailto:宛先にしたいメールアドレス">メールはこちら</a> | メールはこちら |
| リンク先を
別ウィンドウで表示させる | <a href="リンクしたいURL" target="_blank">リンクをはる</a> | リンクをはる |
| 改行する | <br>タグを入れると改行されます | タグを入れると改行されます | ||||||||||
| リスト書きにする -その1 | <ul> <li>箇条書き</li> <li>箇条書き</li> </ul> |
| ||||||||||
| リスト書きにする -その2 | <ol> <li>箇条書き</li> <li>箇条書き</li> </ol> |
| ||||||||||
| 画像を貼る | <img src="http://ショップID.shopserve.jp/pic-labo/画像のファイル名.拡張子（jpeg / jpg / gif / png）" alt="画像の説明文">
※画像台帳に登録した原寸大の画像をはる場合 |  | ||||||||||
| テーブル（表） を組む | <div class="bordlayoutp3"> <table cellspacing="0" cellpadding="0"> <tr> <td>１番目</td><td>１番目２列目</td> </tr> <tr> <td>２番目</td><td>２番目２列目</td> </tr> <tr> <td>３番目</td><td>３番目２列目</td> </tr> <tr> <td>４番目</td><td>４番目２列目</td> </tr> <tr> <td>５番目</td><td>５番目２列目</td> </tr> </table> </div> |
| ||||||||||
| 画像の右上に 説明文をつける | <table> <tbody> <tr> <td><img src="http://ショップID.shopserve.jp/pic-labo/画像のファイル名.拡張子（jpeg / jpg / gif / png）"></td> <td>犬の足跡です。</td> </tr> </tbody> </table> |
|
●オススメの「HTMLの基本を学べるホームページ」
 | とほほのWWW入門 http://www.tohoho-web.com/ 初心者向けの基本編から、上級者むけの応用編まで幅広い層に役立つサイトです。 |
●オススメの「HTMLタグが学べるホームページ」
 | TAG index http://www.tagindex.com/ |
●オススメの「ホームページ制作ソフト」
 | 「ホームページ・ビルダー」（IBM）
http://www-06.ibm.com/jp/software/ internet/hpb/ |
 | 「Adobe Dreamweaver」（アドビ） http://www.adobe.com/jp/ products/dreamweaver/ |
商品詳細ページにおいて、商品のアピールポイントが分かりにくいようであれば、お客様は見向きもせずに、あなたのウェブショップから立ち去ってしまいます。HTMLタグを利用して、分かりやすい文章、文字でアピールをしましょう。
商品詳細ページに、これらのHTMLタグを用いる際は、管理画面「お店運営＞商品台帳」における『メイン紹介文』『サブ紹介文1』『サブ紹介文2』に、それぞれHTMLタグをはりつけることで利用ができます。
▼商品詳細ページの詳細につきましてはオンラインマニュアルをご覧ください。
ご利用ガイド－商品の新規登録－
/shopserve/func01/itemset.html
