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

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

短いキャプション

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

 

 

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

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

 

 

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

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

OTHER FAQ

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

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

カテゴリ Core Ver. 関連モジュール タイトル降順で並び替える
コンテンツの作成 7.15 Form API Validation フォームの入力内容を細かくチェックしたい
SESSION 8.9.x api $_SESION操作のAPI
アップデート 7.16 Core 7.15→7.16アップデート
リバースプロキシ 8.9.x mod_proxy mod_proxy_http mod_ssl Apache2.4 から httpsサーバーへリバースプロキシする方法
Apache2.4 7.50 Apache2.4のアクセス制限
テーマ 8.7.x Bartikのtwigについて
権限 7.50 Cron Basic認証時のCron（wget）実行方法
テーマ 8.4x hook_preprocess_html bodyタグにnode idやaliasのClassを追加する方法
Calendar 7.34 Calendar CalendarモジュールとGoogleカレンダーを同期するには
アップデート 8.9.x PHP CentosでPHPのバージョンアップ（例:5.3->5.6）を行う方法
コンテンツの作成 7.38 CKEditor CKEditorの「ソース」に入力したタグが消える
コンテンツの作成 7.31 CKEditor CKEditorの新規生成ダイアログ内の初期値の変更
コンテンツの作成 8.7.x CkEditor CKEditorエディタ内に Colorboxポップアップ を簡単に挿入する方法
コンテンツの作成 8.9.x CKEditor CKEditor編集中の見た目をフロントと全く同様にする方法
コンテンツの管理 8.6.x Commerce Commerce orderからすべての商品名を取得する方法
Libraries 8.5.x Libraries Commerceで外部JavaScriptをテスト／本番で読み分ける方法
Commerce 8.6.x Commerce Payment Order Commerceで歴代購入数／金額を集計する方法
Commerce2 8.6.x Commerce Order Commerceで注文情報から全Itemを得る方法
Commerce2 8.6.x Commerce Shipment Commerceで配送情報を得る方法
Commerce 7.34 Commerce kickstart, Commerce file Commerceモジュール利用時のダウンロード製品登録方法

ページ