MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

✔優秀なデザイン性 ✔最新のSEO ✔サイト高速化に対応|WordPressテーマ「SWELL」の口コミ・評判・レビューはこちら >>

SWELLの口コミ・評判・レビューはこちら >>

クリック

タップ

Cocoonのリスト(箇条書き)をカスタマイズ!おしゃれな枠やアイコンも設定できる

「文章を箇条書きや番号付きでまとめたい…」

「リストとアイコンリストの設定方法は?」

「リストを枠線で囲んだり、アイコンを挿入できる?」

この記事では、そんな方に向けて、Cocoonでリスト(箇条書き)の使い方とカスタマイズ方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • リストとアイコンリストの使い方やカスタマイズ方法が分かる

できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインでリストで情報を整理し、読みやすい記事を作成できるようになりました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

本記事はWordPressテーマ「」で作成しているので、デザインが抜群にオシャレです!

目次

Cocoonリスト(箇条書き)の使い方とカスタマイズ設定5つ

まずはCocoonでリストを挿入する方法を紹介します。

STEP

記事編集ページで+リストの順にクリックする

Cocoonでリストブロックをページに挿入する手順-1
STEP

これでリストを呼び出せます。

ちなみに、リストは以下3つの方法からも呼び出せます。

それぞれ未入力の段落ブロックで操作してください。

スクロールできます
  1. ショートカットキーを入力する

-スペースキーの順に入力する 「-」は半角で入力してください。

ショートカットキーの入力で任意のブロックを呼び出す手順
  1. キーワードを入力する

/リスト、もしくは/listを入力する 「/」は半角で入力してください。

キーワード入力で任意のブロックを
呼び出す手順
  1. 検索窓で入力する

+をクリックし、検索窓に「リスト」と入力する 「リスト」はカタカナで入力してください

検索窓にブロック名を入力して任意のブロックを呼び出す手順

自分の好きな方法で呼び出しましょう。

かめコンパス

個人的にショートカットキーで呼び出すのがおすすめ!マウスを操作せずキーボード入力だけでかんたんに呼び出せるよ

リストブロックでカスタマイズ可能な項目は5つあります。

カスタマイズ項目

※上のリンクをクリックすると見たい場所へジャンプします。

それぞれ詳しく解説します。

ちなみに、Cocoonのリストブロックのデザイン装飾は公式サイトでも紹介されています。

公式サイトリストブロックの装飾オプションサンプル

カスタマイズ項目がある場所

リストの親ブロックを選択し、設定ブロックの順にクリックすると表示されます。

Cocoonのリストでカスタマイズ項目を表示させる手順

リスト項目を選択しているとカスタマイズ項目が表示されません。

子ブロックではなく親ブロックを選択してください。

Cocoonのリストのカスタマイズ項目が表示されない様子
子ブロック選択時
Cocoonのリストのカスタマイズ項目が表示される様子
親ブロック選択時

枠線を選ぶ

Cocoonではリストの枠線を以下の27種類から選んでカスタマイズできます。

Cocoonのリストの枠線一覧
リストの枠線一覧

設定方法は、右サイドバーにある[C]ボーダーの順にクリックして表示されるページで、リストの枠線を選びます。

Cocoonのリストのボーダー設定がある場所

アイコンを選ぶ

Cocoonでリストのアイコンを以下の21種類から選んでカスタマイズできます。

Cocoonのリストのアイコン一覧
リストのアイコン一覧

設定方法は、右サイドバーにある[C]スタイルの順にクリックして表示されるページで、リストの枠線を選びます。

Cocoonのリストのスタイル設定がある場所

テキスト色と背景色を設定する

Cocoonのリストの文字や背景の色をカスタマイズした場合、下記のようになります。

Cocoonでリストの文字や背景の色をカスタマイズした例

設定方法は、右サイドバーにあるをクリックします。

表示される「色」欄の「テキスト」「背景」をクリックすると色を選択できます。

Cocoonでリストの文字や背景の色をカスタマイズする手順-1

もし使いたい色がない場合は、下の画像にある白と灰色の網目状になっている長方形をクリックしましょう。

Cocoonでリストの文字や背景の色をカスタマイズする手順-2

ここで色を設定する方法は以下の2つあります。

  • カラーピッカーで直感的に選ぶ
  • カラーコードを入力して色を指定する

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

かめコンパス

カラーピッカーで好きな色にピンポイントで合わすのは難しいので、カラーコードの入力がおすすめだよ

カラーコードが分からない…カラーコードの調べ方が分からない…という方はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられます。

クリックで開く

ColorPick Eyedropperの導入方法とカラーコードの調べ方はこちら

導入方法

  1. ChromeウェブストアからColorPick Eyedropperを導入するページを開き、chromeに追加をクリックする
ColorPick Eyedropperを導入するChromeウェブストアページにある「chromeに追加」がある場所

使い方

  1. 使いたい色があるページで、拡張機能ColorPick Eyedropperの順にクリックする
「拡張機能」「ColorPick Eyedropper」がある場所
  1. 使いたい色をクリックすると、#から始まるカラーコードが調べられます
コピーしたいカラーコードが表示されている場所
  1. カラーコードを先ほどの入力欄にコピペすると、使いたい色を利用できます。

順序付きリストに変換する

Cocoonのリストは順序なしリストがデフォルトですが、数字やローマ字といった順序付きリストに変換することができます。

  1. リスト
  2. リスト
  3. リスト
  1. リスト
  2. リスト
  3. リスト
  1. リスト
  2. リスト
  3. リスト
  1. リスト
  2. リスト
  3. リスト
  1. リスト
  2. リスト
  3. リスト

設定方法はリストの親ブロックをクリックし、右サイドバーに表示された「リストのスタイル」をプルダウンして選びます。

Cocoonで順序付きリストのスタイルをカスタマイズする手順

順序付きリストは「初期値」を変更することで「1」以外から始まる数字に設定したり、「順序を逆にする」をスライドして大きい数字から並べることができます。

初期値「3」

  1. リスト
  2. リスト
  3. リスト

順序を逆にする

  1. リスト
  2. リスト
  3. リスト
Cocoonで順序付きリストの初期値と順序をカスタマイズする手順

インデントをずらす

ツールバーの項目「インデント」でリスト項目の開始位置をずらすことができます。

インデントとは…文章の頭に空白を入れること

リストにインデントを使うと、以下のようになります。

  • 親リスト
    • 子リスト
      • 子リスト
      • 子リスト
  • 親リスト
  1. 親リスト
  2. 親リスト
    • 子リスト
    • 子リスト
  3. 親リスト

設定方法は、リスト項目を選択して表示されたツールバー内のインテンドをクリックします。

Cocoonでリストをインデントする手順

インデントはリスト項目が2つ以上、かつ2つ目以降のリスト項目でなければ設定できません。

【リストの上位互換】Cocoonアイコンリストの使い方とカスタマイズ設定

Cocoonにはリストの上位互換とも言えるべき、以下のような「アイコンリスト」があります。

Cocoonのアイコンリストでカスタマイズした一例

アイコンリストでカスタマイズ可能な項目は5つです。

カスタマイズ項目
  • アイコン設定
  • アイコン色
  • ボーダー色
  • 背景色
  • 文字色

それではアイコンリストをページに挿入し、カスタマイズする方法を紹介します。

STEP

記事編集ページで+アイコンリストの順にクリックする

アイコンリストをページに表示させる手順-1

これでアイコンリストを呼び出せます。

クリックで開く

アイコンリストを呼び出す他の2つの方法

それぞれ未入力の段落ブロックで操作してください。

スクロールできます
  1. キーワードを入力する

/アイコンリスト、もしくは/iconlistを入力する 「/」は半角で入力してください。

キーワード入力で任意のブロックを
呼び出す手順
  1. 検索窓で入力する

+をクリックし、検索窓に「アイコンリスト」と入力する 「リスト」はカタカナで入力してください

検索窓にブロック名を入力して任意のブロックを呼び出す手順
STEP

アイコンリストを選択し、設定ブロックの順にクリックして表示されるページでカスタマイズする

Cocoonのアイコンリストをカスタマイズする手順-1

カスタマイズしたい項目のみ設定してください。

色を設定する方法は、先ほど「Cocoonリスト(箇条書き)の使い方とカスタマイズ設定5つ – テキスト色と背景色を設定する」で紹介したやり方と同じです。

Cocoonリスト(箇条書き)とボックス系ブロックでおしゃれにカスタマイズ!

Cocoonにはボックス系ブロックが8種類あり、ボックス内にリストを挿入することで枠付きのオシャレなリストにカスタマイズできます。

ボックス系ブロック全8種
  • 白抜きボックス
  • 見出しボックス
  • タブボックス
  • タブ見出しボックス
  • ラベルボックス
  • アイコンボックス
  • 案内ボックス
  • 付箋風ボックス
Cocoonのリストを挿入したボックス系ブロック一覧
リストを挿入したボックス系ブロック一覧

ボックスブロックによってはアイコンを設定できたり、見出しを挿入できたりできますよ。

かめコンパス

カスタマイズが豊富なボックスでリストがオシャレに様変わりするね

Cocoonでボックスブロックの使い方とカスタマイズ方法を詳しく知りたい方は、下の記事を参考にしてください。

当ブログ愛用「SWELL」のリストは機能が拡張されてオシャレ!

WordPressテーマ「SWELLで使えるリストは以下の8種類からデザイン装飾を選べます。

デフォルト

  • 親リスト
    • 子リスト
  • 親リスト

目次風

  • 親リスト
    • 子リスト
  • 親リスト

チェック

  • 親リスト
    • 子リスト
  • 親リスト

マル

  • 親リスト
    • 子リスト
  • 親リスト

三角

  • 親リスト
    • 子リスト
  • 親リスト

バツ

  • 親リスト
    • 子リスト
  • 親リスト

丸数字

  • 親リスト
    • 子リスト
  • 親リスト

注釈

  • 親リスト
    • 子リスト
  • 親リスト

Cocoonと同じく点を数字や英数字、ローマ数字に変更したり、初期値や順序を逆にする設定もできます。

数字

  1. リスト
  2. リスト
  3. リスト

大文字

  1. リスト
  2. リスト
  3. リスト

小文字

  1. リスト
  2. リスト
  3. リスト

ローマ数字大文字

  1. リスト
  2. リスト
  3. リスト

ローマ数字小文字

  1. リスト
  2. リスト
  3. リスト

初期値「3」

  1. リスト
  2. リスト
  3. リスト

順序を逆にする

  1. リスト
  2. リスト
  3. リスト

そして、何といってもSWELLには独自のカスタマイズ機能である「下線を付ける」「横並び」も設定できるのです。

下線を付けない

  • リスト
  • リスト
  • リスト

下線を付ける

  • リスト
  • リスト
  • リスト

縦並び

  • リスト
  • リスト
  • リスト

横並び

  • リスト 
  • リスト 
  • リスト

私は「下線をつける」機能がお気に入りで、行間が広くなることで窮屈さがなくなります。

かめコンパス

文字が詰まっていると読みにくいよね

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

SWELLの購入日を示す領収書
SWELL購入日:2024/04/26
SWELLの利用を示すWordPress管理画面
SWELL利用中

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用:Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

よりオシャレなリストを使いたい方は、SWELLをチェックしてみてください。

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性
  • SWELL独自のブロックエディターが優秀!
  • 専門家との提携でサイトの表示速度が圧倒的に速い
  • 専用プラグインでSEO評価が向上
  • 記事を書くスピードが1段階アップする!
  • 計測機能付きでアフィリエイトで稼ぎやすい

\Cocoonからの乗り換え先おすすめテーマ!/

/デザイン装飾がよりオシャレに!\

>>テーマ移行手順を見る(5ステップのみ!)

Cocoonリスト(箇条書き)の使い方とカスタマイズまとめ

今回は、Cocoonでリスト(箇条書き)の使い方とカスタマイズ方法を紹介しました。

以下の記事では、リスト以外のカスタマイズ方法をまとめて紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです!

・   ・   ・

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性
  • SWELL独自のブロックエディターが優秀!
  • 専門家との提携でサイトの表示速度が圧倒的に速い
  • 専用プラグインでSEO評価が向上
  • 記事を書くスピードが1段階アップする!
  • 計測機能付きでアフィリエイトで稼ぎやすい

\もっと早く乗り換えればよかった…/

/テーマ移行も5ステップのみ!\

Cocoonでリスト(箇条書き)のカスタマイズの記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次