ビジュアルエディタにインデント可能なリスト（OL,UL）を作成する

TinyMCEではリストとして、オーダリスト<ol>とアンオーダーリスト<ul>が用意されていますが、決して使い易いものではありません。

そこでこのサイトではTinyMCE Advancedの「スタイル機能」を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

下記のその作成方法と使い方を説明します。

1.リストとは

①オーダリストは下記アイコンで入れるNo付リストです。

表示サンプル

バナナ
バナナの2行目
リンゴ
パイナップル

②アンオーダリストは下記アイコンで入れるリストです。

表示サンプル

バナナ
バナナの2行目
リンゴ
パイナップル

リストはEnter(段落替え)で次のリスト項目、Shift+Enter(改行)で2行目となる仕様です。
しかしリストはインデントできないという欠点があります。

理由は、リストは文字列の前に記号を付け、margin-leftで位置をずらす仕様の為にmargin-leftでインデントする仕様とバッティングする為です。

そこでインデントが行えて、見た目にも同じリストの様な新しいリストを下記に作成します。

2.OL,UL要素に変わる新しいLIST要素の追加

インデントが可能でリストと同じ様に2行目がシフトするリストを作成します。

2-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssの設定＞

/*****************************************************************/
/* textリストの設定 */
/*****************************************************************/
/*2行目を半角2文字ずらすlist設定*/
p.my_list_2{
  margin:0;
  padding-left:1.2em;
  text-indent:-1.2em;
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角2文字ずらす(太字で色あり)*/
p.my_list_2b{
  margin:0;
  padding-left:1.2em;
  text-indent:-1.2em;
  font-weight:bold;color:#228b22;
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらすlist設定*/
p.my_list_4{
  margin:0;
  padding-left:2.45em;
  text-indent: -2.45em; /*最初の行だけ*/
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらす(太字で色あり)*/
p.my_list_4b{
  margin:0;
  padding-left:2.45em;
  text-indent: -2.45em;
  font-weight:bold;color:#228b22;
  margin-bottom:4px;margin-bottom:0.25rem}

※1.text-indentは文章の1行目の字下げ幅で、これをマイナスする事によりLIST形式を作り出します。

※2.p.××をいう表記形式はp要素に付くclassを意味しますp.my_list_2を選択すると下記形式になります。
<p style=”my_list_2″>文字列</p>

2-2.style.cssにも同様の設定を追加します

/****************************************
textリストの設定
*****************************************/
/*2行目を半角2文字ずらすlist設定*/
.entry-content p.my_list_2{margin:0;padding-left:1.2em;text-indent:-1.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角2文字ずらす(太字で色あり)*/
.entry-content p.my_list_2b{margin:0;padding-left:1.2em;text-indent:-1.2em;font-weight:bold;color:#228b22;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらすlist設定*/
.entry-content p.my_list_4{margin:0;padding-left:2.5em;text-indent: -2.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらす(太字で色あり)*/
.entry-content p.my_list_4b{margin:0;padding-left:2.5em;text-indent: -2.2em;font-weight:bold;color:#228b22;margin-bottom:4px;margin-bottom:0.25rem}