ビジュアルエディタでインデント（margin-left）が利用できる様にする

PCとスマホを共通コンテンツにする為にはインデントがをうまく使ったコンテンツ作成が重要になります。

しかしTinyMCEのデフォルトインデントは「padding-left」を使っている為、p要素と画像しかインデントできません。

 

またビジュアルエディタのCSSを変更しても画面が変わらないという問題点があります。

これはブラウザのキャッシュの問題で、「スーパーリロード」を行わないと画面に反映しません。

しかし「スーパーリロード」はブラウザによって異なる為に覚えずらいという問題があります。

 

ここではビジュアルエディタにまつわるこれらの問題をカスタマイズする方法を解説しています。

1.ビジュアルエディタ（TinyMCE）のカスタマイズ

TinyMCEのインデントを「padding-left」から「margin-left」に変更すると総ての要素にインデントが使えるようになります。

またこの変更に加えて、その他の設定も変更する事ができます。

functions.phpに下記を定義します。

//*****************************************************************************
//TinyMCEの仕様変更
//*****************************************************************************
function my_tinymce($settings) {
	$settings['block_formats'] = '段落=p;見出し2=h2;見出し3=h3;見出し4=h4;見出し5=h5;整形済みテキスト=pre';
	$settings['indent_use_margin'] = true; /*インデントのpadding-leftをmargin-leftに変える*/
	$settings['indentation'] = '14px';          /*インデント量を1文字にする。1emを使わないのは文字サイズでインデント量を変えない為*/
	$settings['fontsize_formats'] =	'90% 92% 94% 96% 98% 100% 110% 120% 130% 140% 150% 160% 170% 180% 190% 200%';
	$settings['font_formats'] ='メイリオ=Meiryo;游ゴシック=Yu Gothic;游ゴシック Medium=Yu Gothic Medium;Arial=Arial;Verdana=Verdana;Times New Roman=Times New Roman;GEORGIA=GEORGIA;Myriad=Myriad;Menlo=Menlo;ＭＳ ゴシック=ＭＳ ゴシック';
	$settings['cache_suffix'] = 'v='.time();
	return $settings;}
add_filter( 'tiny_mce_before_init', 'my_tinymce' );

<上記プログラムの解説＞

①block_formats：段落リストを整理します。ここではコンテンツ領域では使わない見出しを削除しています。

②indent_use_margin:これをtrueにするとインデントが「padding-left」から「margin-left」に変わります。
インデントは下記ボタンで操作します。

③indentation：インデント量を指定します。ここでは14pxという固定値にしています。
1em(1文字)指定だと見出しの様にフォントサイズでインデント量が変わるので推奨できません。

④fontsize_formats：ビジュアルエディタで変更できるフォントサイズを指定します。
これをpx(固定値)で指定するとスマホで見るとバランスが崩れる為、%で指定しています。
%で指定するとPC,タブレット,スマホでフォントサイズを変更してくれます。

⑤font_formats：ビジュアルエディタ内で使用できるフォントを指定しています。
これを指定すると下記BOXの中に現在の使用フォントが表示されます。
ここで指定するフォントやフォントサイズは、<span>で囲まれた文字属性になります。

⑥cache_suffix：このCSSファイルはキャッシュするな！を指定しています。

この設定をする事によりビジュアルエディタの変更の反映が確実に行えるようになります。

 

2.インデント操作

下記のインデントボタンの操作だけで簡単にインデントできる基本要素は下記になります。

要素	内容
見出し	<h2>～<h5>
本文	<p>通常に文字を書くとこの要素になります
図	<image>
整形済みテキストタグ	<pre>

上記以外のタグ

・表<table>

・ブロッククオート<blockquote>

・独自BOX

のインデント変更方法は、別ドキュメントで解説します。

 

3.インデントを継承する入力方法

まず始めに改行(Shift+Enter)と、段落替え(Enter)は異なる事を理解する必要があります。

3-1.改行(Shift+Enter)と段落替え(Enter)の違い

①改行(Shift+Enter)を使った文章例

今日は晴れています。Shift+Enter しかし明日は雨になると天気予報が言っています。

上記は改行(Shift+enter)なので、段落としては同じ段落になります。

よってインデント操作を行うと、下図の様に2行が一緒に移動します。

今日は晴れています。 しかし明日は雨になると天気予報が言っています。

 

②段落替え(Enter)を使った文書例

今日は晴れています。Enter しかし明日は雨になると天気予報が言っています。

上記は段落替え(Enter)なので段落は2つから構成されます。

よって1行目をインデントすると下記の様になります。

今日は晴れています。 しかし明日は雨になると天気予報が言っています。

結論：インデントは段落に作用します。

 

3-2.インデントを継承させる方法

インデントを継承するという事は、段落は違うけどインデントは継承したい！と言う意味です。

段落が違うということは当然、インデントは0に戻るので一見、矛盾する事を言っているようですが、下記の操作を行うと継承できます。

①今日は晴れています②

上記はインデントが入った1段落です。

②後ろで改行（Enter）すると下記の様になります。

①今日は晴れています② ｜

｜はカーソルの位置です。

しかし②の前で改行（Enter）するとインデントが継承された新しい段落になります。

①今日は晴れています ②｜

すなわち、段落文書の途中で改行（Enter）を挿入すると、インデントが継承された新しい段落になります。