Shopify テーマ、Liquid、ロゴ、その他の類似トピック
Debutをカスタマイズしてテーマ構築を進めています。
下記を参考に、元から用意されているグリッドシステムを使ってレイアウトしていました。
https://www.shopitasker.com/blogs/news/shopify-debut-slate-theme-code-documentation
作業を進めるうちに small や medium-up 以外のブレークポイントが必要になったのですが、theme.css に記述がなく、実現できませんでした。
以前は theme.scss.liquid や theme.css.liquid でもろもろの設定を拡張できていたようですが、Sass廃止に伴ってファイル自体がないようです。
現在の theme.css から small や medium-up を設定しているコードを複製して、欲しいブレークポイントのレイアウト設定をすれば良いのだろうとは思います。
しかし、後から値の微調整を行うとなった場合の作業範囲を少しでも小さくしたく、効率的な方法があれば教示いただきたいです。
よろしくお願いします。
解決済! ベストソリューションを見る。
成功
少々ご要望を把握しかねているのですが、既存のブレイクポイントを残したまま新たに追加したいというご要望でしょうか?
その場合、必要な箇所を複製して値を変更する作業自体は以前も同じように必要だったかと思いますので、作業内容的にはあまり変わらないのではと思います。
「medeia」あたりのワードでthem.css内を検索いただければ設定は見つかると思いますので、それらを丸ごとか必要なだけ複製して新設したメディアクエリ内に入れて値を書き換えることになるはずです。
他方、ブレークポイントの値以外であればCSS変数が使えるので、対象が部分的であればCSS変数によって値を一括管理する方法も検討できます。
把握している範囲(v17.9.1)ではCSS変数はテーマのカスタマイズで値を変更する箇所のみに用いられていたはずですが、そこに囚われず他で利用しても問題はありませんので。
以上ですが、回答内容がご要望に沿っていない場合は申し訳ありません。
成功
少々ご要望を把握しかねているのですが、既存のブレイクポイントを残したまま新たに追加したいというご要望でしょうか?
その場合、必要な箇所を複製して値を変更する作業自体は以前も同じように必要だったかと思いますので、作業内容的にはあまり変わらないのではと思います。
「medeia」あたりのワードでthem.css内を検索いただければ設定は見つかると思いますので、それらを丸ごとか必要なだけ複製して新設したメディアクエリ内に入れて値を書き換えることになるはずです。
他方、ブレークポイントの値以外であればCSS変数が使えるので、対象が部分的であればCSS変数によって値を一括管理する方法も検討できます。
把握している範囲(v17.9.1)ではCSS変数はテーマのカスタマイズで値を変更する箇所のみに用いられていたはずですが、そこに囚われず他で利用しても問題はありませんので。
以上ですが、回答内容がご要望に沿っていない場合は申し訳ありません。
確認とご返信が遅くなってしまい申し訳ございません。
ご回答いただきありがとうございました!
必要なだけ複製して値を変更する必要があるとのこと、理解いたしました。
今回は限定的な箇所だけブレークポイントが必要になったので個別にスタイルを当てて対応しましたが、次回以降の開発時にいただいた回答を試してみようと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024