要素の枠に一行で収まるようにする方法

フォントサイズ自動調整：長いタイトルを一行に収める軽量スクリプト

Webデザインをしていると、「タイトルが長すぎて枠からはみ出してしまう」「スマホで見ると文字が折り返されて不格好になる」という悩みに直面することがあります。

今回は、親要素の幅に合わせてフォントサイズを動的に変更する、軽量なjQueryスクリプトのカスタマイズ方法を解説します。

1. 自動調整スクリプトの本体

以下のコードを、テーマのJavaScript設定エリア（保存情報の「コード編集用エディター」など）に記述してください。1pxずつ下げながら、枠に収まるまでループ処理を行います。

【JavaScript】

function fitText($el) {
    let fontSize = parseInt($el.css('font-size'), 10) || 20;

    // 親要素からはみ出している間、フォントサイズを小さくする（最小10px）
    while ($el[0].scrollWidth > $el[0].clientWidth && fontSize > 10) {
        fontSize--;
        $el.css('font-size', fontSize + 'px');
    }
}

2. 基本的な使い方

特定の要素、または共通のクラス名を持つ要素すべてに適用できます。

■ 単体要素に適用する場合

fitText($('#title'));

■ 複数要素に一括適用する場合

$('.fit-text').each(function () {
    fitText($(this));
});

3. HTMLとCSSの注意点（重要）

このスクリプトが正しく動作するためには、「親要素の幅」が固定されている必要があります。

要素	役割	必要な設定
親要素	サイズの基準	`width`（幅）が指定されていること
子要素 (テキスト)	調整対象	`display: inline-block;` 等

■ 実装例

/* HTML */
&lt;div class="box" style="width:200px;"&gt;
    &lt;span class="fit-text"&gt;長いタイトル文字列&lt;/span&gt;
&lt;/div&gt;

/* CSS */
.fit-text {
	display: inline-block;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: clip; /* はみ出た分を三点リーダーにしない設定 */
	vertical-align: middle;
	max-width: 100%;
	/* iOS Safariでの文字サイズ自動調整を防止 */
	-webkit-text-size-adjust: 100%;
}

4. 応用：ウィンドウリサイズへの対応

ブラウザのサイズが変わった際にも再調整を行いたい場合は、リサイズイベントを監視します。

$(window).on('resize', function () {
    $('.fit-text').each(function () {
        fitText($(this));
    });
});

WordPressテーマ「Lilac Bloom」での活用例

記事タイトルの文字数が多い場合にデザインを崩したくないときは、以下のコードを記述してください。

jQuery(function ($) {
    $('.entry-title').each(function () {
        fitText($(this));
    });
});

まとめ

今回紹介したスクリプトを使えば、どんなに長いタイトルでも一行に美しく収めることができます。Lilac Bloomの「レイアウト設定」と組み合わせて、理想のブログデザインを構築してみてください。