HTMLもCSS初心者が楽天市場ページ制作で覚えるべき5つのhtmlタグ　2/2

こんにちは。社長のオクダイラです！
暑いのに外で遊んでいたら小学生のような黒さになって若干後悔しています。

それでは前回の続きから。

HTMLもCSS初心者が楽天市場ページ制作で覚えるべき5つのhtmlタグ

今回の記事では以下の内容を説明していきます。

1. tableを使用した商品説明文の組み立て
2. CSSが使えないモール対応の罫線
3. モール内のSEOに意識した説明文

tableを使用した商品説明文の組み立て

tableタグを使用して商品の説明を行っていきます。商品の説明という観点から文章ではなくスペック表というようなニュアンスが正しいかもしれません。

文章的な商品の説明は既に画像のほうで完了させているのでテキストは不要かもしれませんがSEO的な観点から重複していても導入を推奨しています。

<table width="750" border="0" cellspacing="1" cellpadding="5" bgcolor="#999999" >

<tr bgcolor="#ffffff">

<td width="30%">商品名称</td>


<td>自転車用スマートフォンホルダー</td>

</tr>


<tr bgcolor="#ffffff">

<td>適応機種</td>


<td>
幅91mm未満のスマートフォン(ケース含む)
</td>

</tr>


<tr bgcolor="#ffffff">

<td>商品説明</td>


<td>
簡単取付
マップアプリがナビになります。 自転車に乗っている時に目的地、周辺情報などの情報をいちいちスマートフォンを出さずに確認できる便利なホルダー。地図を表示していればリアルタイムで情報を確認できます。
 
※運転中の携帯電話の使用は安全の観点からお止め下さい。
 落下防止のシリコンバンドで更に固定&自由度アップ。 
 今までのサイクルホルダーはクランプだけで挟むという若干不安が残る仕様でしたが、今回のリニューアルでクランプ&シリコンバンドのダブル固定方式に。スマホ裏面にモバイルバッテリーなどを挟みこむことも可能です。
 ※ご利用のバッテリー、スマホのサイズによっては挟めないものがあります。 
 すぐに使える嬉しい設計。 
 工具不要
 自転車スマホホルダーを装着するために特別な工具は必要ありません。 
 安心設計
 取り付け部分にはシリコンカバー付きで塗装表面を守ります。
 他機種対応
 91mmまでの幅のスマートフォンに対応しているのでほぼ全機種で利用可
</td>

</tr>

</table>

CSSが使えないモール対応のテーブル罫線

楽天市場を始めyahooショッピングなどのモールでは基本的にCSSは使用できませんね？一部例外も有りますがクロスモールで使用できるhtmlを考慮すると罫線はhtmlタグで記入したほうが利便性が高いです。

<table width="750" border="0" cellspacing="1" cellpadding="5" bgcolor="#999999" >

<tr bgcolor="#ffffff">
【中略】

ポイントは以下の3点です。

1. tableタグの背景色（bgcolor）を罫線の色にする
2. 罫線の太さを(cellspacing)で調整する
3. trの背景色を白などの背景と同じにする

tableタグの背景色（bgcolor）を罫線の色にする

背景色を指定することでtable内が全て指定した色になります。この状態ではまだまだ使用するには至っていませのでカラーの設定程度に考えておいてください。

罫線の太さを(cellspacing)で調整する

cellspacing（table内のセル同士のマージンの設定）を任意の数字にすることで罫線の太さを調整します。サンプルコードではcellspacing=”1″としているので罫線の太さは1pxです。もっと太くしたい場合は数字を上げる事で対応できます。

trの背景色を白などの背景と同じにする

初設定を行ったあとでtrの背景を指定することで他の背景色と合った状態になり罫線のみが表示されるようになります。またこの際にボーダーテーブルのようにしたい場合はtrの背景色を交互に指定することでボーダー上のテーブルに仕上げることが出来ます。

モール内のSEOに意識した説明文

htmlの記事内容とは少しずれてくるのですが大事なことなので併記しておきます。

現在楽天市場yahooショッピングともに商品名以外にも商品説明文の内容が検索結果に表示されています。その状況でテキスト無しの全画像というページでは商品名とキャッチコピー以外でSEO対策ができずニッチなワードや揺らぎをカバーすることが出来ません。前述のようにSEO的な観点からもテキストでの商品説明が必要です。さらに文章の中にカタカナ/アルファベットの表記の揺れや展開色など検索されるであろうワードを自然な形で挿入することが出来ます。

弊社で取り扱っているスマートフォンのケースなどはカタカナ表記とアルファベット表記の両方で検索されることが予想されるので特に効果的な手法です。

例）「iPhone」と「アイフォン」　多色展開のケースには各カラーを記載していると「アイフォンケース　レッド」などの購買意欲の高いワードに対してリーチすることが出来ます。

最後に

htmlタグは非常に沢山ありますがモールの構築にフォーカスすれば決して難しいものではありません。限られた環境の中で最大限のパフォーマンスを発揮する事はとても楽しく達成感のある事ですよね。「うちはこうやってるよー」とかモール内で素敵な情報があればメールください！