どうも、カッパです。
見る人が見ればすぐに分かりますが、このブログで「WordPressテーマ 「WING（AFFINGER5）」を使用しています。
今回は、AFFINGER5が記事内で画像を出力する際にimgタグをfigureタグで囲えるように改良します。ほんの少しのコードで実装できます。
まずfunctions.phpに次のコードを追加します。
add_theme_support( 'html5', array( 'caption' ) );
次に、CSSを修正。
手っ取り早く済ませるには、テーマの「カスタマイズ」から「追加CSS」で下記のコードを追加します。
figure {
margin: 0 0 24px 0;
}
これで完了です。
ざっくり解説すると、
- function.phpに追加した「add_theme_support()」でcaptionをhtml5に対応させる
- figureのデフォルトで設定されているマージンを調整し、画像のずれを修正
という流れです。簡単ですね。
もともとWordPressにはcaption付き画像を出力する際に「figure」と「figcaption」をつける機」能があり、前述の関数「add_theme_support()」でキャプションをhtml5に対応させるか否かでfigureの使用をコントロールしています。
AFFINGER5では、現在のところキャプション付き画像出力をhtml5非対応に設定してあったので、今回この部分を修正したというわけです。
ただ、記事内での画像のずれは修正しましたが、このテーマで画像を使用する際に、他でも影響がでる可能性は十分考えられます。そのあたりは自己責任でお願いします。