プロフィール

mshp0723(旧Mikaん星人アワー)

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

■お仕事関連サイト■
音楽制作・楽曲アレンジ・webサイトやブログ制作・アトリエSS



2010~2013年の業務
サウンド制作関連
・一般クライアントさま向けDAWレッスン
・芸能プロダクションさま、アーティストさま向け楽曲提供
・教育機関さま 歌唱教材ダンスアレンジ
・ダンススクールさま ダンスBGMオーディオデータ編集
・機器メーカーさま ナレーションレコーディングと編集
・地元企業さま イベント用ご当地風楽曲アレンジ制作
・飲食店運営企業さま 店舗用カラオケアレンジ制作
・移動販売店さま 店舗BGM楽曲アレンジ制作


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



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

最近の記事

カテゴリー

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
トラックバック送信先 :
コメント

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

こんにちは。

今月はカスタマイズがんばってあと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サイト構築へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

↓↑クリックお願いいたします♪
関連記事
スポンサーサイト
トラックバック
トラックバック送信先 :
コメント
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。