-
ShopifyJavaScriptCSS
今回は『Shopifyの商品詳細画面、オプション選択のJavaScriptの処理を考察（初学者向け）』で取り上げた話を一歩進めまして、バリエーションを文字ではなく画像で表現する方法を考察してみたいと思います。といっても、前回の延長戦ですからそんなに難しいことではありません。テーマはDawn（6.0.2）です。
-
ShopifyJavaScriptCSS
Shopifyでブログをつける（お知らせとかニュースとかではなく）とするならば目的はSEO対策ということになるでしょう。であれば、目次はSEO的にはあった方がよいとされているのでJavaScriptで作ってみたいと思います。テーマはDawn（6.0.2）です。
-
ShopifyJavaScriptCSS
Shopifyのテーマをカスタマイズする場合に商品詳細画面のテンプレート（main-product.liquid）をいちから作ることはほとんどないとは思うのですが、そうはいっても、どう処理しているのかわからないのも気持ちが悪いので試しに再現してみましたのでJavaScript、CSSを掲載します。テーマはDawnです。
-
JavaScriptjQueryCSS
カッコいい系や高級感を出したいときなどに余白を大きくとったデザインをしたくなるときがありますが、そんなときに便利なのがスクロールスナップです。ブロック単位でしかスクロールできなくなりますので、こちらが意図したデザインをユーザーに見せることができます。できるだけシンプルに作ってみます。
-
jQueryCSS
スクロールと連動して背景画像が拡大するエフェクトを実装してみます。併せてbackground-size:cover; background-attachment:fixed;と同じエフェクトも実装してみます。jQueryで再現しますのでデスクトップとスマートフォンの両方で同じ動作になります。
-
jQueryCSS
スクロールと連動させて画像が切り替わるエフェクトを実装してみます。切り替わる際に使用するマスクを平行四辺形にすることで斜めから徐々に画像が切り替わっていくようにします。レスポンシブ対応にするためにwidthやheightなどもjQueryで動的に設定していきます。
-
JavaScriptCSS
スマートフォンサイトでよく見るハンバーガーアイコンとメニューを実装してみます。使用するのは簡単なJavaScriptのみで特にプラグインは使用しません。カスタマイズがし易いようにわかりやすくシンプルな形で作ってみたいと思います。
-
CSS
オリジナルのテンプレート・スタイルシートで企業サイトを作成する場合、管理画面からエディタで入力するコンテンツにはワードプレスのネイティブCSSが適用されるようにしておかなくてはなりません。ワードプレスには固有のCSSクラスがありますのでこれらを復元していきます。
