茨木・高槻・吹田・摂津の広告宣伝・販促 茨木広告宣伝舎(アド茨木)

Yahoo!ショッピング ストア構築案件でCSSのクセにハマる

待ちに待ったゴールデンウィーク!(ゴールデンウィーク!)昨日に引き続いて卒業式の「呼びかけ」ネタをぶっこんでみました。

ゴールデンウィークは通常業務をお休みにできるので、昨日から集中的にYahoo!ショッピングのストア構築案件を進めています。

今回はトリプルという、楽天における楽天GOLDのようなディスクスペース(ストレージ)を利用しない案件です。外部CSSやjavascriptが利用できないので、かなり制約のある作業を強いられます。

個人的にはトップページにアイキャッチとしてコンテンツスライダーを置きたかったのですが、javascriptなしで動くコンテンツスライダーを見つけられませんでした。

なんとstyleタグも使えません。CSSはHTMLにインラインで記述するしかありません。10年前ならともかく2017年にすべてインラインでCSSを書く羽目になるとは思ってもみませんでした。

ただ逆をいうと創意工夫しだいでは意外にさまざまな表現ができそうです。Yahoo!が用意しているサイトパーツもストアクリエイターで枠やタイトルの色を自由に変えたりできるので、うまくカスタマイズすればどのようなデザインでも違和感なく配置できます。

ようやくほぼ作業が終わったのですが、Yahoo!ショッピングというかストアクリエイターでCSSの挙動に一部で独特のクセがありました。

background-imageプロパティがなぜかPタグには指定できず、divタグに指定したらあっさり背景画像が表示できました。そのほかにもいくつかハマリどころはありましたが、なんとか計画どおりのレイアウトが実現できました。

このストアを公開したらどのようなレイアウトが実現できたかお見せしたいと思います。

初めてのYahoo!ショッピング案件でしたが、デザインを除いては非常に良くできたシステムでした。おそらくいろんな機能を追加したり、改修したからでしょう。

古い温泉旅館のようにつぎはぎだらけでどこに何があるのか分からず最初は面食らいましたが、慣れれば便利で使いやすい痒いところまで手が届くシステムでした。

ただ細かいといえば細かい分、純粋にウェブ制作だけをやっているウェブ制作会社さんなどインターネット通販サイトの運用をしたことがない方には大変だろうとも思いました。

Yahoo!ショッピング ストア構築案件でCSSのクセにハマる
モバイルバージョンを終了