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

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

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

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

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

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

WordPressで箇条書きと番号付きリストを使用する理由

箇条書きと番号付きリストは、コンテンツを読みやすく、スキャンしやすくします。長いテキストブロックの代わりに、読者は必要な情報をすばやく見つけることができます。

これらは、チュートリアル、ステップバイステップガイド、機能リスト、重要な要点に特に役立ちます。WordPressでリストを使用する主な利点をいくつか紹介します：

• 可読性の向上：リストは長い段落を分割し、特にページをスキャンしている読者にとって、コンテンツをフォローしやすくします。
• 訪問者のエンゲージメントを維持：明確なフォーマットは、読者が集中し続け、コンテンツをスクロールし続けるのに役立ちます。
• 情報の記憶を容易にする：整理されたポイントは、密集したテキストよりも理解しやすく、思い出しやすいことがよくあります。
• SEOに役立つ：適切に構造化されたコンテンツは、検索エンジンがページをよりよく理解するのに役立ち、注目のスニペットに表示される可能性を高める可能性があります。
• アクセシビリティの向上：適切にフォーマットされたリストは、スクリーンリーダーやその他の支援技術でより効果的に機能します。

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

方法1：組み込みWordPressリストブロックを使用して箇条書きと番号付きリストを追加する方法（簡単）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リストを作成したら、リストブロックを選択し、ブロックツールバーの「箇条書きリスト」または「番号付きリスト」アイコンをクリックすることで、箇条書きと番号付き形式を切り替えることができます。

これにより、コンテンツの構造が変更された場合に、すばやく調整できます。

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

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

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

これを行う最も簡単な方法は、Shortcodes Ultimateを使用することです。このプラグインを使用すると、簡単なショートコードを使用してカスタムアイコン付きのリストを作成できます。WordPress.orgで400,000以上の有効インストールと4.9/5の評価があります。

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

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のWebサイトにアクセスして、利用可能なアイコンを閲覧できます。ここで、使用したいアイコンを探します。

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

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

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

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

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

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

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

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

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

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

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

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

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

100万以上のウェブサイトから信頼を得ているSeedProdは、WordPress.orgで数千人のユーザーから一貫して4.9/5の星評価を獲得しています。このツールを徹底的にテストした結果、直感的なドラッグアンドドロップエディターにより、初心者にも非常に使いやすいことがわかりました。

詳細については、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を追加することでカスタマイズできます。

高度なスタイリングの場合、通常は、リストアイテム内に直接見出しのような構造的なHTML要素を埋め込むのではなく、CSSを使用します。

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

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

<!-- 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で箇条書きのショートカットは何ですか？

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でも私たちを見つけることができます。