キャプション付きの(右寄/左寄)画像を画像サイズを基準にきれいに表示する方法

カテゴリ コンテンツの作成 コアバージョン 8.9.x 関連モジュール CSS

短いキャプション

CKEditorでキャプション付きの画像を登録すると左のようになる。

 

 

画像表示幅を超えてしまう長いキャプション

しかし、キャプションが長くなると左のようになってしまう。

 

 

画像表示幅を超えてしまう長いキャプション

このような場合、
figure { display: table; }
figcaption { display: table-caption; caption-side: bottom; }
​を追加すると左のようにキャプションが折り返される。

OTHER FAQ

Drupal開発・運用の疑問/質問の答えはここに

無料ユーザー登録すると質問できます。

カテゴリ Core Ver.降順で並び替える 関連モジュール タイトル
言語 6.22 URLエイリアスを使った場合に、翻訳したページで同じURLエイリアスが使えないという不具合
コンテンツの管理 6.x Views Flag Calendar 空き室予約のような仕組みは実現できますか?
ダウンロード 6.x Views Bonus Pack Viewsで表示した内容をCSVダウンロード
コンテンツの作成 6.x Insert Block ブロックの内容を本文中に表示するには?
言語 6.x i18n 多言語対応サイトのサイト名やスローガン/ミッションなどを多言語化する方法を教えてください
コンテンツの作成 6.x Views カルーセルのように回転するコンテンツを作りたい
コンテンツの管理 7,51 Views Data Export Views Data ExportでCSVデータが欠けてしまう
言語 7.14 Entity Translation 各フィールドのラベルの多言語切り替え漏れ(接頭子、接尾子)
フォーム 7.15 system mail()での送信が失敗する
コンテンツの管理 7.15 Views Bulk Operation 標準のコンテンツ編集/ユーザ一覧ページが物足りません
フォーム 7.15 Webform Webform - 確認ページの多言語化
コンテンツの管理 7.15 Pagenation 一つの長いページをBookなどのように連続して読ませることはできますか?
タクソノミー 7.15 Taxonomy manager タームを他のボキャブラリ配下に移動したい
タクソノミー 7.15 Entity_Trarnslation Taxonomy TaxonomyのEntity Translation
ブロック 7.15 Views ひとつのViewsをページやブックページ中で再利用する方法は?
Japanese mail 7.15 Webform, Mail System, Mime Mail, Japanese Mail Helper Webformから文字化けしないメール送信を行うには
コンテンツの作成 7.15 Darty Form 編集ページでの操作ミス
フォーム 7.15 Webform WebformのEntity Translation
コンテンツの作成 7.15 Form API Validation フォームの入力内容を細かくチェックしたい
フォーム 7.15 DefaultTextForNode 新しいページの作成方法を一から教えてください

ページ