HOME  /WordPress(応用)
 /TinyMCEの基本スペックとカスタマイズ
2018年02月06日

TinyMCEの基本スペックとカスタマイズ

WordPressのビジュアルエディタを使い易くするためには一般的にTinyMCEプラグインを使うことが推奨されており、本サイトもこれを採用しています。

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

しかしTinyMCEのデフォルト設定ではこれができません。

これを解決する方法をここで解説しています。

1.TinyMCEの基本スペックと問題点

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

しかしレスポンシブデザインを考えるとPCで作ったコンテンツをスマホで表示する為には、総ての要素にインデントが利用できないと綺麗な画面になりません。

そこでこの問題点を解決します。

2.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文字にする*/
 $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;';
  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>で囲まれた文字属性になります。

 メモ

block_formatsではh1、h6を設定していません。
h1はドキュメントタイトルの見出しなので、ビジュアルエディタに関係ないので指定していません。
またh6は、ここまで使わないという事で指定していません。

インデント量が入るタイミングはインデント操作を行った時にマージン量が文字に追加されます。
よって関数のインデント量を変更しても、既存文書のインデント量は変更されません。

2.インデント操作 

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

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

上記以外のタグ

・表<table>

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

・独自BOX

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

­ ­注意

上記の様なタグのインデントには、どのタグをインデント対象にするか?を指定した後、インデント操作をします。

上記操作はビジュアルエディタの左下に表示されるタグガイド(div >> p等)を利用しますが、これが表示されてない場合は下記操作を行ってください。

エディタページの一番上にある「表示オプション」で「最大行表示エディターと集中執筆モード機能を有効化します」のチェックを外してください。

この機能は記事の入力作業に集中できるように入力以外の表示を一時的に見えなくする機能ですが、設定されている各種環境によってはタグガイドが非表示になる事があります。

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

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

①改行(Shift+Enter)と段落替え(Enter)の違い

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

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

上記は改行(Shift+enter)なのでインデントは、文書全体に反映されます。
インデントとすると下記の様になります。

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

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

今日は晴れています。Enter

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

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

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

今日は晴れています。

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

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

②インデントを継承させる方法

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

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

今日は晴れています。。

上記はインデントが入った1段落です。行の最後でEnterすると下記の様になります。

今日は晴れています。。Enter

2行目

しかし「。Enter。」文書の途中でEnterすると、インデントが継承された新しい段落になります。

今日は晴れています。

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

 メモ

改行(Shift+Enter)は段落の中での改行です。

段落替え(Enter)は、新しい段落を作る改行です。よってカーソルは左端に戻ります。

しかし段落の途中での段落替え(Enter)は、インデントを継承した新段落になります。

当然インデントだけでなく、段落に付随しているスタイルも継承されます。