WordPressで箇条書きと番号付きリストを簡単に追加する方法

箇条書きや番号付きリストを使用して整理されたコンテンツを作成することは基本的なことのように思えるかもしれませんが、多くのユーザーがそれらをうまく表示させるのに苦労していることがわかりました。 📋

ブロックエディターでさまざまなフォーマット方法を検討した結果、クリーンで一貫性のあるリストを作成する最も簡単な方法を発見しました。

デモ環境での広範なテストを通じて、シンプルな箇条書きからカスタマイズされたリストまで、WordPressでリストを追加およびスタイリングするためのいくつかの方法を特定しました。

素晴らしいのは、リストをプロフェッショナルに見せるためにコーディングの知識が一切不要なことです。

この初心者向けガイドでは、WordPressで箇条書きリストと番号付きリストを追加およびフォーマットする方法を詳しく説明します。

WordPressで箇条書きと番号付きリストを追加するタイミング

情報が構造化され、スキャンしやすい形式で提示する必要がある場合はいつでも、コンテンツにリストを追加する必要があります。重要なのは、コンテンツに適切な種類のリストを選択することです。

項目の順序が重要な場合は、番号付きリストを使用します。これは、ステップバイステップのチュートリアル、トップ10ランキング、または特定のシーケンスに従うプロセスに最適です。

項目の順序が重要でない場合は、箇条書きリストを使用します。これは、製品の機能、例、または関連するアイデアのグループをリストするのに適しています。

リストを正しく使用すると、情報が複雑であっても、訪問者はコンテンツを一目で理解できます。これにより、ユーザーエクスペリエンスが向上し、WordPressウェブサイトに長く滞在してもらうことができます。

それを念頭に置いて、WordPressで箇条書きや番号付きリストを追加する方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• Method 1: Using the Built-in WordPress List Block (Easy)
• 方法2：Shortcodes Ultimateを使用する（カスタムアイコン付きリスト）
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• WordPressで箇条書きと番号付きリストを追加することに関するよくある質問

方法1：WordPressの組み込みリストブロックを使用する（簡単）

箇条書きや番号付きリストを追加する最も簡単な方法は、リストブロックとWordPress Gutenbergブロックエディターを使用することです。

これにより、個別のWordPressプラグインをインストールせずに、シンプルな番号付きリストまたは箇条書きリストを作成できます。ただし、このデフォルトのブロックにはカスタマイズオプションがほとんどありません。

カスタムアイコン、横レイアウト、異なる色などでリストを微調整したい場合は、この記事の他の方法のいずれかを使用することをお勧めします。

開始するには、リストを追加したいWordPressの投稿またはページのブロックエディターを開くだけです。または、ウィジェットエディターを開いて、サイドバーなどのウィジェットエリアに箇条書きリストを追加することもできます。

次に、箇条書きまたは番号付きリストを作成するかどうかを選択できます。

WordPressで箇条書きリストを作成する方法

箇条書きリストを作成するには、「+」アイコンをクリックして新しいWordPressブロックを追加します。

表示されるポップアップに「List」と入力します。

右側のブロックが表示されたら、クリックしてページに追加します。

これにより、箇条書きリストの最初の項目が作成されます。最初のリスト項目に使用したいテキストを入力するだけです。

これで、キーボードの「Enter」キーを押して次の行に移動します。WordPressは自動的に2番目の箇条書きを作成します。

これで、2番目の箇条書きに使用したいテキストを入力できます。リストにさらに項目を追加するには、これらの手順を繰り返すだけです。

ネストされたリストを作成したい場合は、「インデント」ボタンをクリックします。これにより、カーソルが右に1ステップ移動し、インデントされたテキストを入力する準備が整います。

「インデント」ボタンを再度クリックすると、ネストされた箇条書きの2つのレベルを作成できます。

次の画像でわかるように、各レベルで異なるアイコンが使用されています。

インデントを減らすには、「インデント解除」ボタンをクリックします。

これでカーソルが左に1ステップ移動し、入力を開始する準備が整います。

「インデント」ボタンと「アウトデント」ボタンを押すことで、複数の異なるレベルのネストされたリストを作成できます。

デフォルトでは、WordPressのブロックエディターは「中」のフォントサイズを使用しますが、右側のブロックオプションの「タイポグラフィ」設定を使用して、小、大、特大の間で切り替えることができます。

リンクを追加したり、太字や斜体などの標準のテキストフォーマットオプションを使用したりすることもできます。これにより、リストが一目でさらにスキャンしやすくなり、理解しやすくなります。

WordPressで番号付きリストを作成する方法

WordPress で番号付きリストを作成するには、キーボードの「1」キーの後にピリオド (.) を入力します。

WordPressは、このテキストを自動的に番号付きリストの最初のアイテムに変換します。

これで、番号付きリストの最初の項目を入力する準備ができました。

その後、キーボードの「Return」キーを押すだけで、WordPressが次の番号付き項目を自動的に作成します。

箇条書きと同様に、「インデント」ボタンと「アウトデント」ボタンをクリックすることで、ネストされたリストを作成できます。

これにより、番号付きの箇条書きの下にインデントされた箇条書きが作成されます。

箇条書きリストとは異なり、インデントは1つのレベルしか使用できません。

リストの外観に満足したら、「更新」または「公開」ボタンをクリックするだけで、WordPressウェブサイトで公開されます。

方法2：Shortcodes Ultimateを使用する（カスタムアイコン付きリスト）

標準のリストブロックはテキストベースのリスト作成に最適ですが、カスタムアイコン付きのリストを作成したい場合もあります。これにより、リストをより視覚的に魅力的で、コンテンツのテーマにより適したものにすることができます。

これを行う最も簡単な方法は、Shortcodes Ultimateを使用することです。このプラグインを使用すると、簡単なショートコードを使用してカスタムアイコン付きのリストを作成できます。

このために、このプラグインの無料バージョンを使用します。この方法ではこれで十分です。ただし、より高度な機能が必要な場合は、有料プランにアップグレードできます。

Shortcodes Ultimate を使用するには、管理画面でWordPress プラグインをインストールしてください。その後、新しい投稿を作成するか、ブロックエディターで既存の投稿を編集します。

今すぐ、ページ上の任意の場所にある「+」ボタンをクリックし、「ショートコード」ブロックを選択してください。

この段階で、以下のショートコードをブロックに貼り付けてください。

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

このショートコードは、次のように、黄色の星アイコン付きの3つの箇条書きリスト項目を表示します。

アイコンと色をカスタマイズするには、Fork Awesomeのウェブサイトにアクセスしてください。ここで、箇条書きリストに使用できるすべてのアイコンを確認できます。ここで、使用したいアイコンを探してください。

例として、「flag」アイコンを使用します。次に、アイコンの名前をコピーして、ブロックエディターに戻ります。

そこに着いたら、単に star をそれに置き換えます。したがって、icon: star の代わりに、icon: flag を使用します。

色を変更するには、icon_color="#ffde0f" のHEXコードを、希望する色のHEXコードに置き換えてください。

そのため、アイコンを緑色にしたい場合は、icon_color="#008000" と入力する必要があります。適切な色の見つけ方については、WordPressサイトに最適なカラー配色の見つけ方に関する記事で詳しく学ぶことができます。

さて、リスト項目をご自身のテキストに置き換えるのを忘れないでください。

コードは次のようになります：

リストの外観に満足したら、「更新」または「公開」ボタンをクリックして、WordPressブログまたはウェブサイトで公開できます。

フロントエンドでのリストの外観は次のようになります。

方法3：ページビルダープラグインを使用する（ランディングページに最適）

カスタムスタイリングで美しいリストを作成したい場合は、SeedProdの使用を検討してください。

この高度なWordPressテーマとページビルダープラグインを使用すると、簡単なドラッグアンドドロップエディターを使用してプロフェッショナルにデザインされたページを作成できます。

また、リストのデザインのあらゆる部分を微調整できる、すぐに使えるリストブロックも付属しています。個々のアイテム間のスペースの変更、標準の箇条書きをカスタムアイコンに置き換えることなどが可能です。

さらに、独自のデザインを持つスタンドアロンページを簡単にデザインできるため、カスタムホームページやランディングページにリストを追加したい場合にも最適です。

このツールは徹底的にテストされており、初心者にも非常に使いやすいことがわかりました。詳細については、当社のSeedProdレビューをご覧ください。

まず、SeedProdをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化後、ライセンスキーを入力する必要があります。

この情報はSeedProdウェブサイトのアカウントで確認できます。ライセンスキーを追加したら、「キーの検証」をクリックするだけです。

プロがデザインしたテンプレートを選択する

その後、SeedProd » ランディングページ に移動し、「新しいランディングページを追加」をクリックします。

次の画面で、テンプレートを選択するように求められます。

SeedProdには、404ページテンプレートやカスタムWooCommerce「サンキュー」ページなどの異なるカテゴリに整理された300以上の美しいテンプレートが付属しています。

カテゴリ内のさまざまなテンプレートを表示するには、いずれかのタブをクリックするだけです。

使用したいテンプレートを見つけたら、マウスカーソルを合わせ、チェックマークアイコンをクリックします。

すべての画像で「Explosive Growth Webinar」テンプレートを使用していますが、好きなデザインを使用できます。

次に、ページにタイトルを付ける必要があります。

SeedProdはページタイトルに基づいてURLを自動的に作成しますが、これを好きなものに変更できます。例えば、URLに関連キーワードを追加すると、WordPress SEOが向上し、関連する検索結果にページが表示されやすくなります。

詳細については、WordPressブログのキーワードリサーチの方法に関するガイドをご覧ください。

タイトルとURLに満足したら、「保存してページ編集を開始」をクリックするだけです。

カスタムページレイアウトを作成する

SeedProdはテンプレートをドラッグ＆ドロップエディターで開きます。右側にはページデザインのライブプレビューが表示され、左側にはいくつかの設定が表示されます。

SeedProdには、ソーシャルシェアボタン、動画、お問い合わせフォームなどを追加できるブロックを含む、デザインに追加できる多くのブロックが付属しています。

詳細については、WordPress でカスタムページを作成する方法 に関するガイドをご覧ください。

デザインにリストを追加するには、「リスト」ブロックを見つけてページにドラッグします。

これにより、プレースホルダーの「Item 1」が付いた縦長のリストがページに追加されます。

代わりに横長のリストを作成したい場合は、「高度な設定」タブをクリックし、「横長」ボタンを選択します。

これで、「コンテンツ」タブを選択してリストの構築を開始する準備が整いました。

デフォルトのテキストを独自のメッセージに置き換えるには、左側のメニューで「アイテム 1」をクリックします。

表示される小さなテキストエディターにリスト項目を入力できるようになりました。

ここで、太字や斜体など、使用したい書式を適用することもできます。

デフォルトでは、SeedProdは各箇条書きにチェックマークを使用しますが、アイコンフォントの組み込みライブラリがあり、これには代わりに1400個のFont Awesomeアイコンが含まれています。

チェックマークを置き換えるには、マウスカーソルを合わせ、表示されたら「アイコンライブラリ」をクリックするだけです。

これにより、使用したいアイコンを選択できるポップアップが開きます。

リスト内の個々の箇条書きに異なるアイコンを使用できるため、より面白く目を引くリストを作成するのに最適な方法です。

より多くの箇条書きを作成するには、「新規項目を追加」ボタンをクリックするだけです。

上記と同じ手順で、テキストを追加したり、デフォルトのアイコンを変更したりできるようになりました。

リストにすべての項目を追加した後、左側のメニューの設定を使用してフォントサイズと配置を変更できます。

「項目間のスペース」スライダーを使用して、個々のリスト項目の間のスペースを増減することもできます。

その後、リスト内のアイコンの色を変更したい場合があります。異なるアイコンを使用していても、SeedProd はすべてのアイテムに同じ色を適用するため、デザインは常に一貫して見えます。

この変更を行うには、「アイコンの色」エリアをクリックし、表示されるポップアップから新しい色を選択してください。

これが完了したら、「詳細設定」をクリックして追加の設定を確認するとよいでしょう。リストのレイアウトを縦書きと横書きで切り替える方法についてはすでに確認しましたが、テキストの色やフォントを変更することもできます。

リストをさらに目立たせるために、ボックスシャドウやCSS アニメーションを追加することもできます。

「高度な設定」タブのほとんどの設定は非常にわかりやすいので、どのような効果を作成できるかを確認するために、それらを探索する価値があります。

これで、さらにブロックを追加し、左側のメニューの設定を使用してカスタマイズすることで、ページの作成を続けることができます。

ページの見た目に満足したら、「保存」ボタンのドロップダウンメニューをクリックして「公開」を選択するだけです。

これで、このページにアクセスして、オンラインストアまたはウェブサイトでリストがライブで表示されているのを確認できます。

方法 4: コードを使用して箇条書きと番号付きリストを追加する (上級者向け)

WordPressの組み込みコードエディターとHTMLを使用してリストを作成することもできます。

ブロックエディターの方が簡単ですが、コードエディターを使用するとHTML構造を正確に制御できます。これは、トラブルシューティングや複雑で事前にフォーマットされたリストの貼り付けに役立ちます。

このトピックの詳細については、WordPressコードエディターでHTMLを編集する方法に関するガイドを参照してください。

開始するには、リストを表示したいページまたは投稿を開きます。次に、右上隅の3つのドットのアイコンをクリックし、「コードエディター」を選択します。

次のステップは、箇条書きリストを追加するか、番号付きリストを追加するかによって異なります。

コードを使用して箇条書きリストを作成する方法

箇条書きリストを作成するには、次のように入力することから始めます。

<!-- wp:list -->
<ul>

ulは「順序なしリスト」を表し、リストに番号がないことを意味します。wp:listは、リストブロックを手動で作成していることをWordPressに伝えます。

次に、「Return」キーを押して新しい行に移動し、最初のリスト項目を作成します。

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

ここで、liは「リスト項目」を表し、行を/liで閉じています。

このプロセスを繰り返して、さらにリストアイテムを作成できます。たとえば、次のようになります。

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

終了したら、別の「unordered list」フラグでコードブロックを閉じます。

</ul>
<!-- /wp:list -->

これにより、次のリストコードが得られます。

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

次の画像でわかるように、これは非常にシンプルなリストを作成しますが、見出しタグなどの他のHTMLを追加することでカスタマイズできます。

コードを使用して番号付きリストを作成する方法

番号付きリストを作成するには、次のように入力するだけです。

<!-- wp:list {"ordered":true} -->

次に、順序付きリストを表す ol と入力できます。

<!-- wp:list {"ordered":true} -->
<ol>

その後、上記で説明したのと同じプロセスに従って、各リスト項目を追加します：

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

最後に、/olタグとwp:listを使用して順序付きリストを閉じます。

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

WordPressで箇条書きと番号付きリストを追加することに関するよくある質問

WordPressで箇条書きや番号付きリストを追加する方法について、読者からよく寄せられる質問を以下に示します。

箇条書きと番号付きのリストを作成するにはどうすればよいですか？

「インデント」ボタンを使用すると、混合リストを作成できます。番号付きリストを開始し、箇条書きのサブアイテムを追加したい場合は、ツールバーの「インデント」ボタンをクリックするだけです。これにより、番号付きアイテムの下にネストされた箇条書きが作成されます。

WordPressで箇条書きのショートカットは何ですか？

WordPressのブロックエディターで箇条書きリストを開始するための主なキーボードショートカットは、アスタリスク（*）を入力してからスペースバーを押すことです。番号付きリストの場合は、1.と入力してからスペースバーを押します。

番号付きリストを a) dl b) ol c) list d) ul にするにはどうすればよいですか？

HTMLの<ol>タグ（オプションb）を使用して番号付きリストを作成できます。「ol」は「ordered list」（順序付きリスト）の略で、アイテムの順序が重要な場合に使用されます。<ul>タグは、順序なし（箇条書き）リストに使用されます。

リストとdivのどちらを使用する方が良いですか？

リストコンテンツには、<div>タグの代わりに、適切なリストタグ（<ul>または<ol>など）を使用する方が常に良いです。リストタグは意味論的な意味を提供し、SEOや、スクリーンリーダーのようなアクセシビリティツールがコンテンツの構造を理解するために不可欠です。

このチュートリアルが、WordPress で箇条書きや番号付きリストを追加する方法を学ぶのに役立ったことを願っています。また、WordPress ブロックエディターで共同編集を追加する方法や、WordPress の最高の Gutenberg ブロックプラグインについても学ぶとよいでしょう。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。