CMS組み込み用HTML・CSSを作るとき、文字や画像の差し代わりに強いかテストするChrome拡張機能「Layout Tester」を作ってみた

2025年1月2日

WebページのHTMLやCSSを作成しているとき、テキストや画像の変更にどれだけ耐えられるかを確認したいことはありませんか？

とくにCMSを組み込む場合、運用中に予期せぬ長さのテキスト・大きさの画像に差しかわるかも……。

そんなチェックを便利にするChrome拡張機能「Layout Tester」を作りました。

Layout Testerの概要

Layout Tester 拡張機能は、画像を別の画像（ https://placehold.jp/ ）に置き換えたり、サイト内のテキストを長くしたり短くしたり、ということを一括で実行できる拡張機能です。

有効のチェック
- テキスト変更を実施するときはチェックを入れます。
対象範囲
- <main></main> の内側だけを対象とするか、<body></body> の内側全体を対象とするかを選択します
テキスト長を以下に変更
- テキストの長さを、元の長さに対して何パーセントの長さに変更するか選択思案す。
- カスタムを選択すると、自由にパーセンテージを入力できます。

装飾用の英字やお知らせの日付のような、長さが大きく変動することの少ない要素を無視できるように、デフォルトでは無視するように設定されています。

「置換実行」ボタンをクリックすると、上記の設定をもとに現在開いているページの画像とテキストを置き換えます。

置換実行後に予定外のレイアウト崩れが起きていないか確認します。

たとえばdisplay:flex関連の設定の都合で意図せず要素が縮んだり、画像のアスペクト比が予定外の変形を起こしたり、はたまた line-clamp の設定をすべきところで調整をしていなかったり……。

WebページのHTMLやCSSを作成しているとき、テキストや画像の変更にどれだけ耐えられるかを確認するためのChrome拡張機能「Layout Tester」をご紹介しました。

CMSなどを利用するときはバックエンド側でデータに文字数制限や画像のクロップ（切り抜き）をする場合もあると思いますが、変更に強いCSSを書く必要がある場合にはぜひこの拡張機能で確認してみてください。

よかったらシェアしてね！