WordPressで記事を書く場合はビジュアルエディタではなく、テキストエディタを使うようにしている。
通常はWordPressのテキストエディタでTABコードを挿入することは無いが、たまに別のエディタで編集したHTMLをコピペするとTABのインデント数が8文字になり、とても見づらい。
何か方法は無いか調べてみた。

CSSでのTAB幅の指定方法

WordPressのテキストエディタ部分はtextareaのようだ。そもそも、CSSでTAB幅が指定可能か調べてみると、tab-size で指定可能なようだ。(IEは未対応模様)

CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

WordPressでテキストエディタの フォントサイズ・TABインデント幅を変更する方法

テンプレートフォルダ内のfunctions.phpに次のコードを追加すれば良い。

この調査により、TAB幅は2文字分にしてみた。
HTMLのインデントはTABとスペースのどちらにするかスタイルガイドを調べてみた。

functions.php
function add_admin_custom_style() {
	echo '<style type="text/css">
		   .wp-editor-area {
			  -o-tab-size:2;
			  -moz-tab-size:2;
			  tab-size: 2 ;

			  font-size:12px !important;
		   }
		 </style>';
}
add_action('admin_head', 'add_admin_custom_style');

フォントサイズ・TABインデント幅 変更前
テキストエディタ フォントサイズ・TABインデント幅変更後

フォントサイズ・TABインデント幅 変更後
WordPress テキストエディタ フォントサイズ・TABインデント幅変更後

※最初はVisualEditorのスタイルを変える必要があるのかと思ったが、WordpressのVisualEditorはiframeでTinyMCEを表示しており、テキストエディタはTinyMCEとは無関係でtextareaで実現されているようだ。