ビジュアルエディターの機能のみでリストをボックスで囲む方法

Tips
この記事は約2分で読めます。

WordPressの投稿で以下のようなリストを利用する人も多いかと思います。

  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3

これを、ビジュアルエディターのみを利用して、以下のようにボックスで囲む手軽な方法を紹介します。

  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3

知っている人は知っていると思うのですが、知らない人も結構多いようなので方法を書いておこうと思います。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

普通に囲むだけではうまくいかない

よく失敗する方法は、以下のようにリストのみを選択した場合です。

通常のリスト選択

上記の状態で、スタイルからボックスを選択すると

ボックスを選択

すると以下のように、アイテムごとにボックスで囲まれてしまい、リストまとめてボックス1つで囲めません。

失敗したリストのボックス化

これをうまく解決する方法を紹介します。

リストをうまくボックスで囲む方法

ビジュアルエディターでリストをまとめるボックスで囲むには、まずリストの上下に改行を入れます。

リストの上下に改行を入れる

そして、上下の改行ごとドラッグしてテキスト選択します。

2018-06-18_20h24_18

上記は分かりやすくするように、上下に半角スペースが入っています。

そして、スタイルからボックスを選択します。

ボックスを選択

すると、上下の改行も含めてボックス化されます。

上下の改行ごとボックス化される

あとは余計なボックスをキーボードで削除します。

余計なボックスをキーボードで削除

すると、リストをまとめてボックス化されたものだけが残ります。

ビジュアルエディターでリストのボックス化完成形

他のボックススタイルでも利用可能

もちろん他のボックススタイルでも、順序リストでも、非順序リストでも利用可能です。

  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3
  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3
  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3
  • リストアイテム1
  • リストアイテム2
  • リストアイテム3

ビジュアルエディターへの機能のみで、結構簡単にできるので、よろしければ試してみてください。

コメント テーマの質問はフォーラムへ

  1. フォーラムはログインが必須なので より:

    ボックスの中にリストを入れる場合
    marginを取り除いと方が良いと思いますが
    如何でしょうか。

    • わいひら わいひら より:

      ol, ulの上下マージンのことでよろしいでしょうか?

      フォーラムは、僕が設定を誤ってしまいログインユーザー以外書き込めない設定になっていました。
      現在は、ログインユーザー以外も書き込めるように修正しました。

  2. ログインユーザー以外 より:

    はい
    「blank-box > ul」
    です

    ログインの件を含め
    チョット気になったので

    登録制で閉め出されたのかと
    思いました

    • わいひら わいひら より:

      最新版(1.1.9)でリストのマージンを取り除いたものに変更しておきました。

      フォーラムについては、完全に僕の設定ミスです。
      先日、開発者向けのフォーラムを新しく作りました。
      https://wp-cocoon.com/community/developer/
      これは、WordPress、PHP等のある程度専門的な知識が必要になるので、このフォーラムだけ「書き込みは登録ユーザーのみ」とさせていただいたんですが、この設定が他のフォーラムにも反映されてしまった形になります。
      現在は、別のユーザー権限を作成して、分けて設定しなおしました。

      ただ、現在のフォーラムの書き込み量であれば何とか対応はできます。
      けれど、あまりにも書き込みが増えるようであれば、僕のキャパシティーを超えてしまいます。なので、そういう場合は制限を取り入れることもあるかもしれません。
      しかし、そういったユーザー制限を取り入れるとしても、当サイトと、ツイッター等で必ずアナウンスはさせていただきます。

タイトルとURLをコピーしました