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

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

短いキャプション

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

 

 

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

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

 

 

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

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

OTHER FAQ

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

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

カテゴリ Core Ver.降順で並び替える 関連モジュール タイトル
Apache2.4 7.50 Apache2.4のアクセス制限
コンテンツの作成 7.50 Code per Node ページ毎にCSSやJSを設定したい
ユーザの管理 7.50 Paypal continued billing drupal7のPaypal継続課金モジュールについて
開発 mail 7.50 Mail Safety 開発/テスト用サイトのメール
CentOS 7.50 消せないファイルを消すには
コンテンツの管理 7.50 Administration menu 標準のユーザー管理ページ
コンテンツの作成 7.50 Inline Entity Form Drupal6のフィールドグループのようなモジュールはありませんか?
drush 7.54 Drush Drushでdrupalサイトをインストールする方法
テーマ 7.56 field レンダリング配列内に「ラベル非表示」を指定する方法
Proxy 7.59 Proxy Apache settings.php リバースプロキシ(Apache)+バックグランドWeb(Drupal 7 )でログインセッションを維持する方法
サイトの環境設定 7.59 さくらのレンタルサーバー php Options さくらのレンタルサーバーで パブリック/プライベートディレクトリにファイルが書き込まれないとき
サイトの構築 7.59 Drupal.ajax drupal 7 で Uncaught TypeError: Drupal.ajax is undefined となったときの対応方法
ユーザの管理 7.59 user pass drupal 7 で 管理者(uid=1)パスワードがわからなくなったとき 新しいパスワードを設定する方法
Custom module 8.3x Custom module Twig Block Cache カスタムモジュールのレンダリングを非キャッシュ化する方法
テーマ 8.3x Contribute themes drupal8-寄贈テーマの動向
サイトの構築 8.3x Webform Webformモジュール メールアドレスの入力ミス確認
テーマ 8.3x Theme drupal8 で パスに応じたページテンプレート名を利用する方法
テーマ 8.3x Core Twig開発用の設定
PHP 8.3x PHP drupa8でhook_init()する方法
テーマ 8.3x Block Cache Theme 管理ページから作成したカスタムブロックを非キャッシュ化する方法

ページ