現在デフォルトスキンとして「Momoon(アクア)」を適用中。

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

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を作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年4ヶ月

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

クーポンコード:Y2KIC92J9Y

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

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

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

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年2ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon

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

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

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

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

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

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

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

    はい
    「blank-box > ul」
    です

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

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

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

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

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

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

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