www.ni4.jp

WYSIWYGエディタでリストの入れ子を作る

ども、どもども。
私、Movable Typeをかれこれ18年ほど利用しております。
そんなわけで、Movable Type 5.2から標準搭載されたTinyMCE(WYSIWYGエディタ/リッチテキストエディタ)とも、かれこれ8年以上の付き合いとなります。

TinyMCEはとても機能豊富なので、Movable Type以外にもさまざまなソフトウェアで利用されており、私が愛用しているMovableType.netでももちろん利用できます。

ただ、大変便利なTinyMCEですが、「入れ子状のリストを作る方法」をつい先日まで知りませんでした!(汗)
入れ子状のリストとは、こんな感じのものです。

  • 和食メニュー
    • 寿司
    • 天ぷら
    • そば
  • 洋食メニュー
    • カレーライス
    • ハンバーグ
  • 中華メニュー
    • ラーメン
    • 餃子
    • 回鍋肉

これができることを知るまでは、恥ずかしながら「TinyMCEでは入れ子状のリストが作成できません!」と言い切っていました…ほんとごめんなさい…

やっとそれを知ったので、今日はその便利な使い方をまとめておこうと思います。

Table of Contents

TinyMCEでリストの入れ子を作る

まずはリスト形式のテキストを通常通り作ります。

続けて、入れ子にしたい部分を選択して「インデントを増やす」をクリック

たったこれだけでリストの入れ子ができます!(知らんかった!驚いた!)

リストマークを途中で変える

入れ子を作るときと同じように、対象箇所を選択し「番号付き箇条書き」を選択すると、その部分のリストマークを変更できます。

こんな感じ。

  • 和食メニュー
    1. 寿司
    2. 天ぷら
    3. そば

もちろんリストマークを逆にすることもできます。

  1. 和食メニュー
    • 寿司
    • 天ぷら
    • そば

キーボードだけで操作する

TinyMCEのボタン操作だけじゃなく、キーボードの「tabキー」と「ENTERキー」でも操作できます。
連続してテキストを入力したいときなど、マウスやトラックパッドをいちいち操作する必要がなくなります。

tabキーを使って入れ子を増やす

リスト形式のテキストを作って、以下の状態でtabキーを押すと

カーソルがある部分が入れ子になります。

もちろん、入れ子をどんどん重ねていくのもOK

  • 和食メニュー
    • 寿司
      • マグロ
      • サーモン
      • しめ鯖

ENTERキーでリストの階層を戻る

また、リストの入れ子をキーボード操作で作っていく際に、入力する階層を戻したいときはENTERキーが便利です。
例えば先ほどの続きで「洋食メニュー」を入れたい場合は、

入れ子のままENTERキーでリストを増やし、そのまま続けてENTERキーを押すとリストの階層を戻すことができます。
今回の場合、ENTERキーを2回押せば、最上位の階層に戻ることができます。

あとは通常通り入力を進めるだけでOK

  • 和食メニュー
    • 寿司
      1. マグロ
      2. サーモン
      3. しめ鯖
  • 洋食メニュー
    • カレーライス
      1. インドカレー
      2. 欧風カレー

これなら、その都度マウスやトラックパッドを操作する必要がないので、次々とテキストを入力していくことができます!
リストマークを変えたり、CSSでオリジナルのリストマークを作ると、とても見やすいリスト形式がTinyMCEで作れるようになりますね!

できないと完全に思い込んでしまっていたので、目からウロコがぼろぼろと落ちました(笑)
TinyMCE、ありがとう!
そして今まで間違って教えていた皆さん、ほんとごめんなさい!

にしやま やすふみ

札幌のウェブサイト・ホームページ制作会社 ジャクスタポジションで、代表とディレクターやってます。Movable Typeとラーメン、ザンギ、酒が好き。
プロフィール詳細はこちら

アクセスの多い記事