HOME  /WordPress(応用)
 /OL,UL要素に変わる新しいLIST要素の追加
2017年10月27日

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

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

そこでこのサイトでは半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

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

1.リストとは

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

表示サンプル

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

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

表示サンプル

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

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

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

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

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

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

2-1.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.css¥editor-style.cssにも同様の設定を追加します

/****************************************
textリストの設定
*****************************************/
/*2行目を半角2文字ずらすlist設定*/
.contents p.my_list_2{margin:0;padding-left:1.2em;text-indent:-1.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角2文字ずらす(太字で色あり)*/
.contents 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設定*/
.contents p.my_list_4{margin:0;padding-left:2.5em;text-indent: -2.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらす(太字で色あり)*/
.contents 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.インデント操作 

新しく作成したリストは下記のインデントボタンでインデントできます。