nanraka-no-haihu-ba
てがろぐ用のスキンを配布する場所
No.117
返信 2024/8/21(Wed) 21:40 edit_note
« No.116 / No.118 »
初期表示に戻る
メッセージありがとうございます。
・ギャラリーをスマホから見たときに画像を2列か3列にしたい
ちょっと調整が難しいのですが、一番簡単なのは「tegalog-kozin-gallery.css」の末尾に
/* 画面幅599px以下で画像を2列にする */
@media screen and (max-width:599px) {
.galmainbox { grid-template-columns: repeat(2 , 1fr);}}
と追加する方法かと思います。スマホで3列だと表示が崩れたので2列でよろしくお願いします。
追記したcssファイルをアップロードしたら、PCならスーパーリロード(Ctrl+F5)(macはCmd + Shift + R)、スマホならブラウザのキャッシュを削除して更新されているか確認してみてください。
～ここから説明～
ギャラリーのサムネの列を決定しているのは、「tegalog-kozin-gallery.css」609行目あたりからの/* 画像欄をグリッド表示にする */という部分です。grid-template-columns: repeat(auto-fill, minmax(160px,1fr));という部分で、「画像を横幅いっぱいに敷き詰めて一つのサムネが横160px以下になったら折り返す」という装飾にしています。これで、PCやスマホの画面幅によって列が変わります。(PCでブラウザの横幅を伸縮させてみると挙動がわかりやすいです)
ここの「160px」と書いてあるところを「150px」とかにするとだいたいのスマホで2列くらいになるのですが、今度はPCの表示が4列になるんですね…(これでもよければここで調整する方法もあります)
なので、最初に提示した方法では、599px以下の画面幅の場合にはずっと2列になるよう固定しています。多分大丈夫かと思いますが、表示崩れなどありましたらまたご相談ください。
・「カテゴリ「◯◯」に属する投稿」などの文面の変更
これはてがろぐの設定画面からできます。「設定」→【状況に応じた見出しの表示】からある程度の変更が可能です。これ以上カスタマイズしたいとなると、どのような表示にしたいかによってそれに合わせたCSSを書かなければならないのでちょっと難しくなります。もしどうしてもこうしたいという希望がありましたらまたご連絡ください。(できなかったらすみません)
畳む