この実装、面倒なら代行します
WordPress 5系からエディターの標準がブロックエディター(Gutenberg)になったのは皆さんご存知の通りですが、そのタイミングで、公開するページのテンプレートに以下のスタイルシートを参照する記述が勝手に追加されるようになったのは、みなさんご存知でしたでしょうか?(具体的には wp_head() 関数で自動で呼び出すようになっています)
/wp-includes/css/dist/block-library/style.min.css
なんでも、ブロックエディターで作ったレイアウトを実際のページに出力するためのスタイルシートなのだそうで。
そして、上記ファイル内において、バージョン5.5で新たなスタイルが追加され、それによって微妙にレイアウトが変わってしまったという報告が各方面から寄せられているので、今回はそのご紹介。
問題となっているのは次の記述です。
html :where(img) { height: auto; max-width: 100%; }
これによって、画像のmax-widthを100%以外で設定していたり、あるいはそもそもmax-widthを定義していなかったりすると、アップデート前後で画像のサイズに微妙な差異が生じることになります。
デザインに関するスタイルは利用する側が設定するんだから、わざわざWordPress側に用意してもらわなくても結構ですっ!という方にとっては、自分で記述したオリジナルのスタイルに干渉するだけの邪魔な存在ですよね。
そこで、邪魔だな、と思う方は、思い切ってこのファイルを読み込まないようにしてしまいましょう。
function dequeue_plugins_style() { wp_dequeue_style('wp-block-library'); } add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);
わりとこの現象にぶつかるサイト運営者の方、多いんじゃないかと思うので、ぜひ参考にしてください。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。