ホームページビルダーでCSSを編集しようとした際、CSSエディター内の文字が極端に小さく表示され、編集作業が困難になることがあります。特に高解像度ディスプレイやWindowsの表示スケール設定を変更している環境では、このような症状が発生しやすくなります。この記事では、ホームページビルダーのCSSエディターで文字が見えないほど小さい場合の原因と対処法を解説します。
Ctrl+マウスホイールで文字サイズが変わらない理由
Webブラウザや一部のエディターでは、Ctrlキーを押しながらマウスホイールを回すことで表示倍率を変更できます。
しかしホームページビルダーのCSSエディターでは、この操作が文字サイズ変更ではなく別の表示機能に割り当てられている場合があります。
そのため、文字間隔が変わるだけでフォントサイズ自体は変更されないことがあります。
まず確認したいホームページビルダーの設定
ホームページビルダーにはエディター表示に関する設定項目が用意されているバージョンがあります。
メニューの「ツール」「オプション」「環境設定」などを開き、エディター関連のフォント設定が存在しないか確認してみましょう。
バージョンによって名称は異なりますが、以下のような項目が見つかる場合があります。
| 設定項目 | 確認内容 |
|---|---|
| フォント設定 | エディターの文字サイズ変更 |
| 表示設定 | ズーム倍率やスケール設定 |
| エディター設定 | ソース編集画面の表示方法 |
Windowsの表示スケールが影響しているケース
最近の4Kモニターや高解像度ノートPCでは、Windows側の拡大率設定との相性によってホームページビルダーの文字が異常に小さく表示されることがあります。
Windowsの「設定」→「システム」→「ディスプレイ」から表示スケールを確認してみましょう。
例えば100%設定になっている場合、125%や150%へ変更すると改善することがあります。
特に古いバージョンのホームページビルダーでは高DPI環境への対応が不十分な場合があります。
互換性設定を変更すると改善する場合もある
ホームページビルダーの実行ファイルに対してWindowsの互換性設定を変更することで表示が正常になるケースがあります。
ホームページビルダーのショートカットを右クリックし、「プロパティ」→「互換性」→「高DPI設定の変更」を確認してみてください。
高DPIスケーリングの上書きを有効にすると、文字が見やすくなる場合があります。
CSS編集だけなら外部エディターの活用も有効
どうしてもCSSエディターの表示が改善しない場合は、CSSファイルを外部エディターで編集する方法もあります。
例えばVisual Studio CodeやNotepad++などの無料エディターはフォントサイズ変更が容易で、CSSの編集にも適しています。
編集後にホームページビルダーへ戻ってプレビューやアップロードを行う運用にすると、作業効率が向上することもあります。
バージョンによって対処法が異なることに注意
ホームページビルダーは長年販売されており、バージョンごとに設定画面や機能が異なります。
そのため、「ホームページビルダー22」「ホームページビルダーSP21」など具体的なバージョンが分かると、より正確な解決方法を特定しやすくなります。
まずは利用中のバージョンを確認し、公式サポート情報やマニュアルも参照してみましょう。
まとめ
ホームページビルダーのCSSエディターで文字が極端に小さい場合、Ctrl+マウスホイールでは改善しないことがあります。まずはソフト側のフォント設定や表示設定を確認し、Windowsの表示スケールや高DPI設定も見直してみましょう。
改善しない場合はVisual Studio Codeなどの外部エディターを併用する方法も有効です。また、ホームページビルダーのバージョンによって設定方法が異なるため、利用中の製品名を確認して対処することが解決への近道になります。


コメント