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

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

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

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

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

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

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください


Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Yahoo!ショッピング制作(申込~開店フルサポート)88,000円から
独自ドメインのインターネット通販サイト構築(運用支援オプションあり)88,000円から
スマホ対応のウェブサイト制作(ホームページ制作)33,000円から