モバイル表示について

[Anonymous_66227082d3dc79ffda091df7c52cd37d]

書き込み失礼します。

商品画像やコレクション画像をモバイル表示

2列ではなく3、4列と増やしたいのですが

同じ質問をされている方の通りに実装を試みたのですが記載されているコードが見当たりませんでした。

海外のテーマを選択しているからでしょうか？

海外のテーマを選択してた場合の商品画像をモバイル表示で2列ではなく3.4列と増やす仕方を知りたいです。

お使いのテーマはMr.Parker です。

よろしくお願いします

[Qcoltd]

お使いのテーマは、こちらの、“Mr Parker” で合っていますでしょうか？

https://themes.shopify.com/themes/mr-parker/styles/wardrobe

また、

コレクションページのカラム数のお話をしている、

ということでよろしいでしょうか？

一旦、上記の前提があっているとして、お話を進めます。

有料のテーマなので、

細かなコード修正の提示はできないですし、

動作保証もできないのですが、

それでもよろしければ、下記のようにするとうまくいくかもしれません。

コード編集にて、アセットに、stylesheet.cssというCSSはないでしょうか？

(stylesheet.css.liquid かもしれません。)

もし、ありましたら、下記のような記述がある場所をお探しください。

/* Mobile Grid Columns */
  @media (max-width: 739px) {
    .sm-span-1.auto { grid-column: auto / span 1 !important; width: 100%; }
    .sm-span-2.auto { grid-column: auto / span 2 !important; width: 100%; }
    .sm-span-3.auto { grid-column: auto / span 3 !important; width: 100%; }
    .sm-span-4.auto, .sm-span-third.auto { grid-column: auto / span 4 !important; width: 100%; }
    .sm-span-5.auto { grid-column: auto / span 5 !important; width: 100%; }
    .sm-span-6.auto { grid-column: auto / span 6 !important; width: 100%; }
    .sm-span-7.auto { grid-column: auto / span 7 !important; width: 100%; }
    .sm-span-8.auto { grid-column: auto / span 8 !important; width: 100%; }
    .sm-span-9.auto { grid-column: auto / span 9 !important; width: 100%; }
    .sm-span-10.auto { grid-column: auto / span 10 !important; width: 100%; }
    .sm-span-11.auto { grid-column: auto / span 11 !important; width: 100%; }
    .sm-span-12.auto { grid-column: auto / span 12 !important; width: 100%; }

私が確認した限りでは、

各商品ブロックのdivに、sm-span-6というクラスが常に付与されており、

これが、カラム数が2列以上にならないようストッパー的な役割を果たしているようです。

.sm-span-6.autoの記述を削除することで、ご希望の形になるかもしれません。

(この変更による、他の箇所への影響についてまでは調べられませんでした。)

/* Mobile Grid Columns */
  @media (max-width: 739px) {
    .sm-span-1.auto { grid-column: auto / span 1 !important; width: 100%; }
    .sm-span-2.auto { grid-column: auto / span 2 !important; width: 100%; }
    .sm-span-3.auto { grid-column: auto / span 3 !important; width: 100%; }
    .sm-span-4.auto, .sm-span-third.auto { grid-column: auto / span 4 !important; width: 100%; }
    .sm-span-5.auto { grid-column: auto / span 5 !important; width: 100%; }
    .sm-span-6.auto { }
    .sm-span-7.auto { grid-column: auto / span 7 !important; width: 100%; }
    .sm-span-8.auto { grid-column: auto / span 8 !important; width: 100%; }
    .sm-span-9.auto { grid-column: auto / span 9 !important; width: 100%; }
    .sm-span-10.auto { grid-column: auto / span 10 !important; width: 100%; }
    .sm-span-11.auto { grid-column: auto / span 11 !important; width: 100%; }
    .sm-span-12.auto { grid-column: auto / span 12 !important; width: 100%; }

なお、

上記を試す前に、

このファイルの内容を、どこかにコピーしておき、

表示崩れが発生しても、

すぐに復旧できるようにしておくことをお勧めいたします。

ご参考まで。

(キュー田辺)

[Anonymous_66227082d3dc79ffda091df7c52cd37d]

わかりやすいご返答ありがとうございます。

試してみます。

コレクションのカラムだけではなく

セクションのイメージギャラリーのカラムもモバイル表示で2列以上する場合はどちらのCSSファイルでどのように変更すればよろしいでしょうか？

[Qcoltd]

@Anonymous_66227082d3dc79ffda091df7c52cd37d さま

セクションのイメージギャラリーというのは下図の箇所のことで合っていますでしょうか？

こちらで合っているようでしたら、

カラム数の変更は大変難しいです。

一応、下記のようにすることで惜しい形にはできます。

コード編集にて、アセットの、stylesheet.css、もしくはstylesheet.css.liquid から下記のコードを探します。

@media screen and (max-width: 740px) {
  .gallery__column-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

grid-template-columns: repeat(1, 1fr);でカラム数を制御していますので、

2カラムにしたいのでしたら、

grid-template-columns: repeat(2, 1fr);

3カラムにしたいのでしたら、

grid-template-columns: repeat(3, 1fr);

というように変更します。

また、内容物のはみ出しを防ぐために、

grid-template-columns: repeat(3, minmax(0, 1fr));

とします。

また、その下のギャラリー1つ1つのブロックに設定してあるgrid-columnもどうにしかないといけません。

動作確認していませんが、下記でどうでしょうか。

@media screen and (max-width: 740px) {
  .gallery__column-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
  }
  .gallery__column-container .gallery__column {
    grid-column: auto !important;
    grid-template-columns: minmax(0,1fr);
  }

しかし、カラム数を2にするくらいまでは大丈夫なのですが、

3カラムや4カラムなどにしていくと、

ギャラリーの中のボタンが幅を維持してしまうため、

見た目がおかしくなってしまいます。

逆に言いますと、

ギャラリーにボタンや文字を設置しなければ、

カラム数を3カラムにしても表示的にはおかしくならないはずです。

完全な回答ではありませんが、

参考になれば幸いです。

(キュー田辺)

[Anonymous_66227082d3dc79ffda091df7c52cd37d]

こちらの記載通りにコピーし貼り付けますと3列には変更されました。

2列にしたいのですが記載の所を

grid-template-columns: repeat(2, 1fr);

こちらに変更しても2列に変わりません。

どうすればよろしいでしょうか？

[Qcoltd]

@Anonymous_66227082d3dc79ffda091df7c52cd37d 様

2列にする場合は、下記のようにされると良いでしょう。

@media screen and (max-width: 740px) {
  .gallery__column-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .gallery__column-container .gallery__column {
    grid-column: auto !important;
    grid-template-columns: minmax(0,1fr);
  }

ご参考まで。

(キュー田辺)

[Anonymous_66227082d3dc79ffda091df7c52cd37d]

数々のご質問に対してのご返答感謝します。

追加でお伺いしたいのですが、

Shopifyのブログ記事項目でトップページ画面でのタイトルの表示と記事の説明？の文字を小さくする方法などはありますか？

トップページにブログのセクションを入れて掲載しているのですがタイトルと説明のテキストが大きすぎて不格好になります。

変更の仕方を教えて頂けますでしょうか？

使っているテーマは変わらずMr.Parkerです。

[Qcoltd]

@Anonymous_66227082d3dc79ffda091df7c52cd37d 様

お困りの箇所は、上記、でよろしいでしょうか？

もし、合っているようでしたら、

以前の回答でお伝えしたカラム数の調整のために変更したCSSファイル(assets/stylesheet.css or assets/stylesheet.css.liquid)を下記のように修正されると良いかと思います。

ブログタイトル

.homepage-blog .article-body h2 {
    margin-top: 10px;
}

↓下記のように変更

.homepage-blog .article-body h2 {
    margin-top: 10px;
    font-size: 24px;
}

font-sizeは、24pxとしましたが、お好みのサイズにご調整ください。

ブログの説明文

上記のブログタイトルの下に、下記を追加します。

(私の環境ではブログの説明文を表示できなかったので、推測での回答になります。)

.homepage-blog .article-body p {
    font-size: 14px;
}

例によって、font-sizeはお好みのサイズにご調整ください。

なお、投稿日や著者名の表記を小さくしたい場合は、

ul#featured-posts .article-data {
    width: 100%!important;
}

を、

ul#featured-posts .article-data {
    width: 100%!important;
    font-size: 14px;
}

としてみてください。

(font-sizeはお好みのサイズに。)

ご参考まで。

(キュー田辺)