【WordPress】整形済みテキストのタブの文字数を変更する

WordPressのブロックエディターで使用出来る「整形済みテキスト」のタブの文字数を変更する方法を解説します。

はじめに

整形済みテキストのタブの文字数は、WordPressの設定により決まっています。
これにより、ローカル環境では綺麗に揃っていた文章を整形済みテキストに貼り付けた際、タブを使っていた部分がガタガタになることがあります。

ローカルで作成していたプログラムですが、ローカルでは綺麗に並んでいました。

整形済みテキストに貼り付けると、タブの文字数により、ガタガタになってしまいました。

Option Explicit

Dim msg

msg = "あいうえお、" _
	& "かきくけこ、" _
	& "さしすせそ、" _
	& "たちつてと、" _
	& "なにぬねの、" _
	& "はひふへほ、" _
	& "まみむめも、" _
	& "やゆよ"

MsgBox msg

本記事では、上記のような問題を解決するために整形済みテキストごとに自由にタブの文字数を変更する方法をご紹介します。

まず、整形済みテキストのタブの文字数を確認してみます。

12345678
	←ここがタブ

デフォルトの設定では、タブは半角文字で8文字分でした。

まずは、タブの文字数を一括変更する方法です。

記事編集画面の下部にある「カスタムCSS」に、以下を入力します。
下記の例では、タブの文字数を４文字に変更しています。

整形済みテキストはプログラム上では「preformatted text」と定義されています。
CSSで整形済みテキストを扱う場合は、その略称の「pre」を使用します。

pre {	
	tab-size:4;	// タブの文字数
}

下記は、文字数の変更前後の比較画像です。

タブの文字数：8文字（デフォルト値）

タブの文字数：４文字

タブサイズが８文字から、４文字に変更されました。

しかし、整形済みテキストを複数使用している場合、それぞれのタブサイズを変更したい状況もあると思います。
次項では、整形済みテキストごとにタブサイズを変更する方法を説明します。

リンク

ここでは、整形済みテキストごとにタブの文字数を変更してみたいと思います。

まずは、４文字にするサンプルです。
記事編集画面の下部にある「カスタムCSS」に、以下を入力します。

.pre-tab-size-4 {
	tab-size:4;
}

次に、タブの文字数を変更したい整形済みテキストのブロックメニューの「高度な設定」にある「追加 CSS クラス」に「pre-tab-size-4」と入力することで、カスタムCSSに記述した内容が適用されます。

サンプルを適用した整形済みテキストです。
タブの文字数が４文字になっています。

12345678
	←ここがタブ

下記は、カスタムCSSを適用していないため、デフォルトの８文字になっています。

12345678
	←ここがタブ

このようにカスタムCSSを使用することで、整形済みテキストごとにタブの文字数を設定することが可能です。

リンク

６文字にするサンプルです。

.pre-tab-size-6 {
	tab-size:6;
}

上記を適用した、整形済みテキストです。

12345678
	←ここがタブ

記事は以上です。タブの文字数を自由に変更出来るようになったことで、整形済みテキストの汎用性が高まりましたね。是非試してみて下さい。