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

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

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

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

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

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

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

スポンサーリンク

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

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

通常のリスト選択

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

ボックスを選択

すると以下のように、アイテムごとにボックスで囲まれてしまい、リストまとめてボックス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

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

Tips
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年11ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

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

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

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

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

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

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

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

    はい
    「blank-box > ul」
    です

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

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

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

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

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

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

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