解決済
@小柴豪さま
セクションのイメージギャラリーというのは下図の箇所のことで合っていますでしょうか？
こちらで合っているようでしたら、
カラム数の変更は大変難しいです。
一応、下記のようにすることで惜しい形にはできます。
コード編集にて、アセットの、stylesheet.css、もしくはstylesheet.css.liquid から下記のコードを探します。
@media屏幕和(max-width: 740 px) {.gallery__column-container { display: grid; grid-template-columns: repeat(1, 1fr); }grid-template-columns:重复(1,1 fr);でカラム数を制御していますので、
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屏幕和(max-width: 740 px) {.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カラムにしても表示的にはおかしくならないはずです。
完全な回答ではありませんが、
参考になれば幸いです。
(キュー田辺)
@小柴豪さま
セクションのイメージギャラリーというのは下図の箇所のことで合っていますでしょうか？
こちらで合っているようでしたら、
カラム数の変更は大変難しいです。
一応、下記のようにすることで惜しい形にはできます。
コード編集にて、アセットの、stylesheet.css、もしくはstylesheet.css.liquid から下記のコードを探します。
@media屏幕和(max-width: 740 px) {.gallery__column-container { display: grid; grid-template-columns: repeat(1, 1fr); }grid-template-columns:重复(1,1 fr);でカラム数を制御していますので、
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屏幕和(max-width: 740 px) {.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カラムにしても表示的にはおかしくならないはずです。
完全な回答ではありませんが、
参考になれば幸いです。
(キュー田辺)
@小柴豪様
お困りの箇所は、上記、でよろしいでしょうか？
もし、合っているようでしたら、
以前の回答でお伝えしたカラム数の調整のために変更した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はお好みのサイズに。)
ご参考まで。
(キュー田辺)
コミュニティ・ブログ記事
本日はドメイン更新および更新日を過ぎてしまった場合の手順について説明いたします。今回、説明いたします各手順はShopifyを通じて購入・移管されたドメインにのみ適用されますことを予...
Byrinaflora Oct 22, 2023
Shopifyのチェックアウト画面にて特定のカートをアイテムと共に入れた状態で直接リンクしたいですか？ブログやニュースレターに「今すぐ購入」ボタンを配置したいですか？お客様に簡単な...
ByNina_13 Oct 10, 2023
Shopifyストアで支払いを受け取る最も簡単な方法はShopifyペイメントを利用することです。一般的にネットショップにて決済サービスを申し込む際には審査があり、審査期間中は決済...
Byrinaflora Oct 3, 2023