【Cocoon】箇条書きをカラー枠で囲む方法。画像で解説

Cocoon

WordPressの無料テーマCocoonでは、箇条書きリストを簡単に設定できます。

箇条書きリストは、記事全体を読み進めやすくしたり、重要ポイントを分かりやすくしたりするために役立つ要素です。

今回は、

  • 箇条書きリストの作り方
  • 箇条書きリストをボックス内に入れる方法

を、ブロックエディタクラシックエディタ、それぞれのやり方を解説します。

目次から自身が使っているエディタの手順にスクロールして、チェックしてみてください。

ブロックエディタの場合

ブロックエディタはWordPress5.0からの標準エディタです。必要な要素を選んで文章を入力するという手順で書き進めていきます。

箇条書きリストの作り方

リスト用の文章を作成する前に、リストを挿入したい位置にカーソルを合わせて、画面左上の「」をクリックします。

 

ブロックの中からリスト」を1回クリックします。「リスト」が見当たらない場合は、検索ボックスに「リスト」と入力してください。

 

右側の欄に追加された「・」の横に箇条書きの内容を入力していきましょう。2行目に移動するときは「Enter」で改行をすると自動的に「・」が追加されます。

「Enter」で改行するとリストが以下のように並びます。

  • りんご
  • みかん
  • ぶどう

箇条書きを終了するときは、最後の文字のあとで「Enter」を2回押してください。

 

改行ではなく、リストを複数追加してから文章を入力すると、以下のように1行ごとに隙間ができてしまいます。

  • マスカット
  • いちご
  • もも

 

番号つきのリストにしたい場合は、挿入したリストのあたりでクリックして、下図の矢印の項目をクリックします。

ボックス(囲み枠)内にリストを作る方法

はじめに、ボックスを挿入してから、その中に箇条書きリストを追加します。

リストを挿入したい位置にカーソルを合わせて、画面左上の「」をクリックします。

 

検索に「ボックス」と入力し、「白抜きボックス」をクリックします。

本文入力スペースにボックスが挿入されますので、ボックスの内側をクリックして、先ほどの手順で箇条書きリストを入力していきましょう。

  1. 「+」をクリック
  2. 「リスト」を1回クリック
  3. 「Enter」で改行しながら箇条書きの文章を入力していく

この手順です。

  • こんなふうに
  • 箇条書きのリストが
  • 作れたでしょうか

ボックス内のテキストの色背景色はボックスの内側をクリックして右側に表示される「」をクリックすると変更できます。

ボックスの枠線の色は、↓図のようにボックスの外側をクリックして右側に表示された編集画面の「ボーダー色」から変更できます。

作成中はデータが消えてしまわないよう、こまめに下書き保存をすることをおすすめします。

クラシックエディタの場合

クラシックエディタにはブロックがなく、本文入力画面の上にあるツールを選んで編集していきます。

箇条書きリストの作り方

先に、箇条書きの文章を、Enterで改行して入力しておきます。

 

次に、リストの範囲を選択し、上部のツールの「番号なしリスト」or「番号付きリスト」をクリックして完成です。

ボックス(囲み枠)内にリストを作る方法

普通の箇条書きリストを作成したあと、その下のスペースにスタイルから選んだボックスだけを挿入します。

  • りんご
  • みかん
  • ぶどう
 

 

下図の順番で③のところに箇条書きのコピーを貼り付けして、はじめに作成した箇条書きを削除しましょう。

 

このように作成できたでしょうか。

  • りんご
  • みかん
  • ぶどう

 

ボックス内のリストを選択した状態で、スタイルの「ボックス(案内)」の色をクリックすると、下のようにボックス内に背景をつけることもできますよ。

  • りんご
  • みかん
  • ぶどう

 

Cocoonには色々なボックス(囲み枠)が用意されているので、箇条書きリストと組み合わせて見やすくしていきましょう。

コメント

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