プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

カラーミーショップカスタマイズねた~商品詳細ページを作りこんでランディングページに。画像サイズ指定に制限されない自由なデザインで、コンテンツをリッチに&訴求力を。

こんにちは。

今月はカスタマイズがんばってあと1件やるぞ♪

一本釣り大好き


mikaん星人アワーです。

今回はまた、カラーミーショップカスタマイズねたです。こういう使い方はメインストリームでないかもしれませんが、フリーページでなくて、商品詳細ページを詳細エディット・ランディングページのように使うというのをやってみました。


ランディングページとは?
・広告や、検索結果からのリンク先となるページ。必ずしもトップページではない。

・『○○のキーワードや、○○の流入元からきた人のほしい物は○○。およびその人たちの属性は○○』などといったことを考慮して、ターゲットに向けて、写真や動画・事例などで、より訴えかけるコンテンツを提供してることが多い。
(Landing Page Optimization)




はてさて、カスタマイズ性が高いとはいえ、カラーミーの個別商品詳細ページでどこまでいけるでしょうか?
(トップから来た方は、『続きを読む』で)



商品詳細ページをランディングページみたいに使うために、どのようなエディットをしたの?


まずは画像ですね。商品だけ写った画像を、そのままドラッグ(ドラッグ&ドロップでアップできるようになった)して終わり、というわけでなく、少し見栄えを工夫してみます。


実際にやったものとは異なりますが・・・
201210171.jpg
こういう画像のイメージです。上記はイメージ確認いただくためのサンプルです。フリー素材サイトからみかんや人物画像をお借りしました。(足成)


このような、リッチな見栄えの画像や表・グラフ・使用実例やユーザーの声などを組み合わせ、『○○という希望を持つ、そのページを訪れたユーザーに納得してもらいやすいように』作ります。


でもこの画像大きいよね?他の商品は500×400pxとかでそろえてるんだけど、入らなくない?


カラーミーの商品詳細ページhtmlには

<{if $product.img_url != ""}>
<img src="<{$product.img_url}>" class="large" />
<{else}>
<img src="http://img.shop-pro.jp/tmpl_img/21/now200.gif" class="large" />
<{/if}>

というタグが書いてあって、個別商品ページでアップした画像はここに読み込まれます。


画像サイズは指定できますが・・・
201210172.jpg
他の商品メイン画像とサイズが明らかに違うので、そろえるのがめんどい場合は


商品個別ページでなくて、サーバーに、この画面から、またはftpとかでアップしてしまいましょう
201210173.jpg


んで、個別商品ページに。(注:商品管理から入るほうの個別ページです。デザイン設定の方から入る枠はもうできていると仮定。)
201210175.jpg
邪道ですが1×1pxとかの画像をドラッグしてアップ(笑)これで独自タグの呪縛から逃れられます。
なぜこれをやるかというと、『上記のタグ消すと他のページも商品画像でなくなるし、そうでなくてもno img時のタグ消したり手を入れる点がおおいので』です。




で、さっきの大きいヘッダー画像みたいなものも

<img src="http://img○○.shop-pro.jp/○○○○○/○○/etc/○○.jpg" width="" height="" alt="" title="" style="border:solid 0px " />

のタグで読み込み、商品管理から入るほうの個別ページにそのまま貼ってしまえばokです。サイズもメインカラムからはみ出さない範囲で自由自在。ここまでくると自由度はかなり上がります。



そのほか、『セルの色変えた表』や、『とある領域に背景画像指定・その上で文字の位置をmarginとかで好きな位置に持っていく』などをやりたい場合は、CSSをデザイン設定の方で記載しておきます。

201210174.jpg

直接・商品管理の個別商品ページ編集エリアに書いてもたぶんOKだけど、div class="○○"みたいなので、ソースをシンプルにしたい場合は、デザイン設定ページで書いておくとよいでしょう。



という感じで、やってる方しかおそらくわからないねたでしたが、もし参考になって、ページを工夫し、多くの人に製品のよさを知ってもらえるのなら幸いです。





○商品詳細ページも見せ方の差別化をはかって、しっかり良さを伝えよう!ライバルは多いけど生き残ろう!

と思う方は
にほんブログ村 IT技術ブログ Webサイト構築へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

↓↑クリックお願いいたします♪
関連記事
スポンサーサイト
トラックバック
トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ