2010年9月7日火曜日

楽天サイトを彩る小さな魔法

スポンサーリンク

以前から楽天の商品ページについては記事にしていますが、いずれもレイアウト上の問題やユーザビリティなどがテーマでした。

しかしいままでの内容では、楽天関係のキーワードで来られる方の要求を満たせていないと感じました。
そこで、今回は簡単な楽天ショップページの作り方のコツを記事にしてみます。

楽天の商品ページを作る際に、少しでも役に立てば良いのですが。


楽天でのHTMLタグ使用制限


楽天でページをデザインする為に、タグを打とうとすると大きな問題にぶつかります。

それは、使えるタグと使えないタグがある事です。
どれが使えるのかは楽天内部で見る事が出来るマニュアルにありますが、実際作り出すと分からなくなるものです。

ここでは詳細にかけませんが、以下に簡単だと思われる装飾の方法を書いてみます。

なお、楽天の各商品ページをGoogleやYahoo!で表示させる事はあきらめた方がいいので、外部検索エンジンのSEO的な留意点は無視します。

つまりは見栄えが整えばOKと言う事です。

魔法のインラインCSS


楽天で商品ページを自由にデザインして作る際に便利なスキルは、インラインCSSです。

楽天が制限したHTMLのタグによる装飾しか出来ない状態に比べると、格段の差がでます。

なお、「CSSッテナニ?」と言う方は、下記のサイトやご自分で検索して下さい。
この記事で説明するより、遥かに分かりやすく見て頂けるはずです。


ここでは、CSSは「ページを装飾する為の仕組み」とだけ説明しておきます。
インラインCSSはCSSを組み込み込む為の1つの方法です。

形としては下記のようになります。

<h4 style="font-size:16px; color:#000">

上記の結果見出しの意味を持つ<h4>要素が、文字の大きさ16pxで黒色にかわります。

このようにHTMLタグに直接CSSを埋め込む事により、商品ページに外部CSSが使えない楽天でも細かい装飾が可能となります。

インラインCSSを使う1


では、下記の例を挙げて実際に作ってみます。



作るのは見出しの部分で、マークアップとしては<h3>とします。
状況により<h3>は<h2>や<p>や<ul>等を用います。

インラインCSSを使う2


まず最初に、見出しの背景に使う画像をつくります。
その画像を楽天の手順に従って登録してください。

次にマークアップです。

インラインCSSはタグの中に「style=""」を書き込み、「""」の中にCSSを書き込んで行きます。

実際にサンプルのような画像を背景に敷く場合、以下のようになります。

<h3 style="background-image:url(×××);">

となります。
なお、×のところは先ほど登録した画像のURLです。

具体的には、<h3>の背景画像として前述の画像を表示させています。
デフォルトでは、背景画像は繰り返して表示されてしまいます。

同じ模様が繰り返されるタイルのようなイメージと言えば、分かりやすいかもしれません。

よって、背景画像の繰り返しを止める為に以下の部分を追加します。

<h3 style="background-repeat:none; background-image:url(×××);">

さらに、この状態だと左端の背景画像と文字が重なっているはずです。
そこで左に余白(padding)とります。

<h3 style="padding-left:20px; background-repeat:none; background-image:url(×××.jpg);">

これで画像を見出しの下に思い通りに敷けたはずです。
文字の色や太さを変える場合は、以下のようになります。

<h3 style="color:#300; font-weight:bold; padding-left:20px; background-repeat:none; background-image:url(×××.jpg);">

文字の色が変わり、文字の太さがより太くなったはずです。

仮に背景画像に重なるように文字を配置する場合、文字の色を変えるのは基本です。
背景を変える場合には、文字色も同時に考えて同時に記述するとミスがないでしょう。

ちなみに見出しの下の本文の部分も、同じ方法で実現出来ます。
<table>を使わなくても、自由に商品ページに画像を配置出来る訳です。

具体的には、<ul>や<ol>など、内容にあったマークアップを行い、各タグにインラインCSSを用います。

<li>に対して背景画像を敷き、画像の分のpaddingをとれば出来上がりです。

結び


楽天に限らず、独自のCMS機能をもつシステムの場合タグが入力できないない場合があります。
また、外部CSSが使えない事も多いでしょう。

もしもタグが使えて外部CSSが使えない場合には、インラインCSSを使ってみましょう。
きっと、表現の自由度が上がるはずです。

ただし、かなりの力技であり、あまり褒められた方法ではありません。
後々の管理や修正も、インラインCSSを使わない時より手間がかかるはずです。

しかし文字の大きさを大きくしたり、文字の色を変えたりするだけでは実現できない効果を得られます。

もしも狙い通りに売上向上の役に立つのであれば、今後は商品ページのデザインを強化する選択肢も方針に加えてよいかもしれません。

楽天市場関係まとめ

楽天市場関係まとめ

スポンサーリンク

0 件のコメント :

コメントを投稿