サムネイル画像にキャプションを入れるとレイアウトが崩れてしまう。

解決済 Chanchan.
(@eureka20080321)

5年、 1ヶ月前
みなさま、いつも大変お世話になっております。

テーマはbeauti_plusで子テーマを作成してカスタマイズしています。

商品のページを作成しているのですが、サムネイル画像を追加しキャプションに文字を入れてプレビューをすると、文字の多い画像のレイアウトが崩れてしまいます。(写真の配置は、全て左寄せにしています。)

ならば、キャラリーの追加ではどうか？とやってみたのですが、今度は画像の数によって表示される写真の大きさがサムネイルで指定しているのも関わらず、変わってしまいます。

できればサムネイル画像を使い、ギャラリー写真のようにカラム数が指定でき、レイアウトがキャプションの文字数に関わらずに配置できる方法を教えてください。
- このトピックはChanchan.が5年、 1ヶ月前に変更しました。
- このトピックはChanchan.が5年、 1ヶ月前に変更しました。
ヘルプの必要なページ: [リンクを見るにはログイン]

14件の返信を表示中 - 1 - 14件目 (全14件中)

CG
(@du-bist-der-lenz)

5年、 1ヶ月前

課題が複合的すぎませんか。写真を左寄せにするのは、回りこみでしていませんか。

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

CGさま。

いつも頼りにしてしまって、すみません。

どのように説明したら伝わるのか？と考え、色々と書き込んでしまいました。
複合的すぎてしまいましたか…。

キャプションの文字数に関わらず、サムネイルをキレイに配列できればと思っています。

写真の回り込みとは、どのようになっている事なのでしょうか？
それを回り込ませなければ、出来そうでしょうか？

解決法が分かるようでしたら、ぜひ教えていただけないでしょうか？
よろしくお願いします。
DRILL LANCER
(@rickaddison7634)

5年、 1ヶ月前
カラムブロックで6カラムを作って、それぞれのカラムの中にキャプション画像付きを入れてはどうでしょうか？
その場合、画像の配置は中央寄せが良いかもしれません。
- この返信は5年、 1ヶ月前にDRILL LANCERが編集しました。
munyagu
(@munyagu)

5年、 1ヶ月前
こんにちは

スタイルシートに以下を追加してみてください。
これで思い通りか分からないですが。
```
.entry-content {
    display: flex;
    flex-wrap: wrap;
}
```
- この返信は5年、 1ヶ月前にmunyaguが編集しました。
DRILL LANCER
(@rickaddison7634)

5年、 1ヶ月前
@munyagu さん
.entry-contentはテンプレートで側で指定されているので
その指定をすると他の記事に影響が出てしまいます。

もし、それをやるならこんな感じになると思います。
```
.page-id-1036 .entry-content {
    display: flex;
    flex-wrap: wrap;
}
```
トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

RICKさま、初めまして。

いつも参考にさせていただいております。
お忙しい中コメントをいただき、ありがとうございます。

カラムブロック、少しやってみます！

munyagu
(@munyagu)

5年、 1ヶ月前

@rickaddison7634

そのようにするなり、このページの時のみ読み込まれるようにするなり、サイトに合わせてご自由にされたら良いと思います。

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

munyaguさま、初めまして。

いつも他のフォーラムを参考にさせていただいております。
返信が遅くなり申し訳ございませんでした。

後で、スタイルシートに追加して見てみます。

本当にお忙しい中、ありがとうございます。

DRILL LANCER
(@rickaddison7634)

5年、 1ヶ月前

並べたいのが16個の場合、4カラム x 4行がスマートな気がします。
カラムブロックのカラム数の変更は掴みどころを掴まないと変更できません。
また、ブロックは掴みどころさえ掴めればドラッグ＆ドロップで移動できるので試してみてください。
（掴みどころを探すのには苦労すると思いますが頑張ってみてください。）

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

CGさま。
おかげさまで、無事に解決いたしました。今回はカラムという方法を教わり、そちらで目的が達成できました。質問が複合的になり過ぎてしまい、非常に回答しにくかったと思います。
申し訳ございませんでした。

また、よろしくお願いします。

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

RICKさま。

おかげさまで、無事に解決いたしました。
今回、カラムという使い方を教えていただき、感謝しています。
確かになかなか難しかったですが、書いては消してを繰り返し、性格をつかむことが出来るようになりました！

本当にありがとうございました。
また、ぜひアドバイスしてください。

よろしくお願いします。

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

manyaguさま。

おかげさまで無事に解決いたしました。

私のやり方が悪く、うまく反映されなかったのですが、こういったときはスタイルシートを見てみると良いということが分かり、私にとっては大収穫でした！

今回はお忙しい中、アドバイスをいただき本当にありがとうございました。

またぜひ教えてください、よろしくお願いします。

DRILL LANCER
(@rickaddison7634)

5年、 1ヶ月前

カラム分割は「Ghost Kit」のグリッド機能が最速だったりします。なので、差し支えないようなら試してみると良いかもしれません。

トピック投稿者 Chanchan.
(@eureka20080321)

5年、 1ヶ月前

RICKさま。

プラグインの情報を教えていただき、ありがとうございます。
早速試してみたいと思います。