モバイル表示について
@小柴豪 さま
セクションのイメージギャラリーというのは下図の箇所のことで合っていますでしょうか？
こちらで合っているようでしたら、
カラム数の変更は大変難しいです。
一応、下記のようにすることで惜しい形にはできます。
コード編集にて、アセットの、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カラムにしても表示的にはおかしくならないはずです。
完全な回答ではありませんが、
参考になれば幸いです。
(キュー田辺)
@小柴豪 さま
セクションのイメージギャラリーというのは下図の箇所のことで合っていますでしょうか？
こちらで合っているようでしたら、
カラム数の変更は大変難しいです。
一応、下記のようにすることで惜しい形にはできます。
コード編集にて、アセットの、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カラムにしても表示的にはおかしくならないはずです。
完全な回答ではありませんが、
参考になれば幸いです。
(キュー田辺)
@小柴豪 様
お困りの箇所は、上記、でよろしいでしょうか？
もし、合っているようでしたら、
以前の回答でお伝えしたカラム数の調整のために変更した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はお好みのサイズに。)
ご参考まで。
(キュー田辺)
コミュニティ・ブログ記事
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024
2023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024
概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー（BFCM）は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024