サイト全体に「COLORS(ブルー)」スキン適用中。
シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

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

Tips

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

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

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

Cocoon

コメント

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

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

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

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

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

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

    はい
    「blank-box > ul」
    です

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

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

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

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

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

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

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