HOME  /WordPress(応用)
 /ビジュアルエディタにインデント可能なリストを作成する
2020年03月26日

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

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

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

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

1.リストとは

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

表示サンプル

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

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

表示サンプル

  • バナナ
    バナナの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}

 

2.新しいリストの使い方

2-1.使い方

LIST形式にしたい文書を選択し、上記ボタンから
p.my_list_2
p.my_list_2b
p.my_list_4
p.my_list_4b
の何れかを選択します。
bが付いてスタイルは、太字でカラー文字になります。

 

2-2.半角2文字リスト(p.my_list_2、p.my_list_2b)の例

表示サンプル(p.my_list_2を指定した場合)

1.バナナ
バナナの2行目

2.リンゴ

3.パイナップル

•バナナ
バナナの二行目

•リンゴ

•パイナップル

上記はオーダリスト、アンオーダリストとほぼ同じように表示され、更にインデントが利きます。

半角2文字リストは上記以外に

・全角系:等が使えます。

・半角系:1)1.a)等が使えます。

 

2-3.半角4文字リスト

表示サンプル(p.my_list_4を指定した場合)

1-1.バナナ
バナナの2行目

1-2.リンゴ

1-3.パイナップル

半角4文字リストは上記以外に

※1.注1.等にも使えます。(総て半角4文字です)

 

3.インデント操作 

新しく作成したリストをインデント可能にする為には下記ドキュメントを参照してください。

 ­ビジュアルエディタでインデントが利用できる様にする

その結果、下記インデントボタンでインデントが可能になります。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。