WordPress 4.9.5でcaptionのstyleが戻ったら投稿を直す前にthemeのCSSと本文を分けて確認する

WordPress 4.9.5の更新後に画像のcaptionが以前と違って見えても、投稿本文を先に書き換えません。captionに入れた説明、WordPressが出力する部分、themeが見た目を決めるCSSは別のものです。どこで表示が変わったかを見ないまま本文へ改行や空白を足すと、次のtheme修正で文章だけが崩れます。

WordPress.orgは、WordPress 4.9.5でcaption shortcodeに使われる以前のstyleを戻したと案内しています。captionがある記事を使うsiteでは、security updateの適用を確認したあと、画像の説明が読めるかと、theme側の表示指定が意図に合うかを別に確かめます。本文の言葉を残す仕事と、画面の余白や文字の位置を整える仕事を混ぜないことが大切です。 WordPress.orgの案内

captionの文章と画面のstyleは役割が違う

captionは、画像のそばで読者へ渡す短い説明です。写真がどこを示すのか、図の数字が何を表すのか、画像だけでは分かりにくい条件を補えます。記事の内容に必要な説明なら、文字の色や余白が変わっても、本文の一部として残します。

一方、文字の大きさ、画像との間隔、枠線、背景色、中央寄せと左寄せは、読ませ方に関わるstyleです。themeのCSSや追加したstylesheetが決める範囲になります。captionの表示が気になったときに、投稿本文へ空白や記号を入れて位置を動かそうとすると、文章の意味と装飾が一つの編集画面へ混ざります。画像を差し替えたときや画面幅が変わったときに、どの指定が効いているか分からなくなります。

たとえば、施工例の写真へ「入口から見た受付」と書いている記事を考えます。この文は、写真の内容を伝える説明です。文字が画像のすぐ下へ出るか、左右に余白を持つか、狭い画面で何行に折り返すかは、themeの表示です。見た目を整えるために「入口から見た受付」の文を削ると、画像だけを見た読者には意味が残りません。反対に、説明文を残してCSS側で余白を直せば、文章の役割を変えずに表示を整えられます。

更新後は三つの場所を順に見る

captionの見た目を確認するときは、次の三つを同じものとして扱いません。

最初に、captionを含む公開記事を二、三件選びます。写真、図、横長の画像など、使い方が違う記事を選ぶと、同じstyleがすべての画像へ無理に当たっていないかを見やすくなります。記事を開き、画像の直後に説明が読めるか、説明が途中で隠れないか、本文と区別できるかを確認します。この段階では、管理画面の文章を変更しません。

次に、広い画面と狭い画面で表示を見ます。広い画面だけで画像とcaptionがそろっていても、狭い画面で文字が極端に小さくなったり、画像から離れたりすれば、読者は説明を結び付けにくくなります。画面幅ごとに別の本文を入れる必要はありません。どの幅でも同じ説明を読めるように、themeのstyleを確認します。

styleを直す前に影響する記事を探す

themeのCSSを変える前に、captionを使っている記事がどれだけあるかを調べます。古い記事だけに見える問題でも、同じshortcodeを使う記事はほかにもあるかもしれません。代表記事一件だけで直すと、画像の幅、captionの長さ、本文の段組が違う記事で新しい崩れが出ることがあります。

一覧を作るときは、記事名、URL、画像の種類、captionの長さ、公開画面で気になる点、確認者を記録します。ここでいう一覧は、すべての記事を分類するための台帳ではありません。CSSを変えたときに、どの表示を見直す必要があるかを忘れないための作業メモです。captionがない記事まで同じ確認へ混ぜる必要はありません。

説明用の仮例として、CSSでcaptionの文字を画像の外側へ大きく離す指定が残っていたとします。画像の下へ説明を近づける修正を行うなら、短いcaptionだけでなく、二行以上になるcaptionも見ます。長い説明だけが画像の横へ回り込むなら、問題は文章の長さではなく、画面幅とCSSの組み合わせかもしれません。本文を短く切り詰める前に、何が起きているかを画面で確かめます。

captionを使わない画像まで同じ形へしない

すべての画像へcaptionが必要なわけではありません。飾りとして置いた背景画像、本文で同じ内容を十分に説明している図、見出しのそばにある小さな印などは、captionを付けることで画面が重くなる場合があります。captionを使うかどうかは、画像の見た目ではなく、読者がその説明を必要とするかで決めます。

captionを使う画像と使わない画像を分けると、themeのCSSも過剰に広がりません。画像すべてへ同じ余白、枠、文字を与えるより、captionがあるまとまりだけを対象にした方が、本文中の通常画像やロゴへ不要な変更を及ぼしにくくなります。CSSの指定を追加する人は、対象がcaptionを持つ画像なのか、記事中の全画像なのかを明記します。

ここでは、画像の代替内容をcaptionへ置き換える話は扱いません。画像を見られない読者へ何を伝えるかと、画像のそばへ補足説明を置くかは別の設計です。WordPressの更新後に見た目を直す作業をきっかけに、画像の意味まで曖昧にしないようにします。

更新の記録へ表示確認を残す

WordPress 4.9.5の更新を行った人と、公開記事を確認する人が違う場合は、versionだけで引き継ぎを終えません。更新した日時、確認した記事のURL、画面幅、captionの表示、変更したCSS file、未確認の記事を残します。これなら、次にthemeを更新したあとも、captionの崩れがWordPress本体、theme、記事編集のどこで起きたかを調べられます。

制作を外部へ頼む場合でも、投稿本文を誰が編集できるか、themeのCSSを誰が変更したか、元へ戻すfileや記録がどこにあるかを把握します。文章の修正とthemeの修正は、同じ会社が行っても別の変更です。更新後に急いで本文を直す前に、表示を確認し、直す場所と確認する人を決めます。

最初の一手は、captionを含む公開記事を一件開き、説明文そのものに直す必要があるのか、文字の見え方だけを直せばよいのかを書き分けることです。その判断をしてから、本文かthemeのどちらへ手を入れるかを決めます。