【THE THOR】ボックス内にリスト・箇条書きを作る方法3選！【解説画像・コピペコードあり】

THE THORはガチ・神テーマ！
一緒にブログで稼いでいこう✨

＼月10万稼ぐ！モアイも使ってる／
収益化最強のWordPressテーマ
THE・THOR(ザ・トール)を公式で見る

目次

• 1 【THE THOR】ボックス内にリスト・箇条書きを作る方法3選！【解説画像あり】
  • 1.1 解決の前提条件：作業環境
• 2 THE THORで、ボックス内にリスト・箇条書きが作れないトラブル
  • 2.1 ボックス内にリスト・箇条書きがある状態のイメージ
  • 2.2 なぜか上手くボックス内にリスト・箇条書きが表示されない
• 3 THE THORで、ボックス内にリスト・箇条書きを作る方法
  • 3.1 「ボックス」と「リスト・箇条書き」を別々に作り、コピー＆ペーストで合体
  • 3.2 テキストエディタで直接htmlを編集する
  • 3.3 他のサイトからコピー＆ペーストする（このサイトからコピペOK）
    • 3.3.1 デフォルトボックス＆番号なしリスト
    • 3.3.2 デフォルトボックス＆番号付きリスト
• 4 THE THORで、ボックス内にリスト・箇条書きを作るのは簡単！

【THE THOR】ボックス内にリスト・箇条書きを作る方法3選！【解説画像あり】

THE THORでボックス内にリスト・箇条書きを作る方法について、以下のとおりご紹介いたします。

1. THE THORで、ボックス内にリスト・箇条書きが作れないトラブル
2. THE THORで、ボックス内にリスト・箇条書きを作る方法

それぞれ詳しく見ていきましょう！

解決の前提条件：作業環境

この記事では、以下の作業環境を想定して解決策をお示ししています。

• WordPress 5.3.2
• Classic Editor（重要）

未だにブロックエディタに移行してなくてすみません……

THE THORで、ボックス内にリスト・箇条書きが作れないトラブル

THE THORで、ボックス内にリスト・箇条書きが作れないトラブルについて確認します。

1. ボックス内にリスト・箇条書きがある状態のイメージ
2. なぜか上手くボックス内にリスト・箇条書きが表示されない

それぞれ詳しく見ていきましょう！

ボックス内にリスト・箇条書きがある状態のイメージ

まず、ボックス内にリスト・箇条書きがある状態のイメージを確認しておきましょう。

おそらく、以下のようなモノを再現したいはずです↓

• テスト
• テスト
• テスト

1. テスト
2. テスト
3. テスト

※デフォルトパーツの「ボックス」の中に、「番号無しリスト」と「番号付きリスト」を入れてみました。

まさしくコレ！コレが作りたい！

でも、何かこう……できないんだよ！（？）

心中、お察しします
私もコレの作り方、最初すごく悩んだ記憶がある💦

なぜか上手くボックス内にリスト・箇条書きが表示されない

THE THORを直感的に使うと、なぜか上手くボックス内にリスト・箇条書きが表示されないんですよね。

• テスト
• テスト
• テスト

最初めちゃくちゃ悩んだ記憶がある……
「ブログ、やっぱ無理だわ」って思うくらいの無力感💦

でも、大丈夫！

THE THORで、ボックス内にリスト・箇条書きを作る方法

THE THORで、ボックス内にリスト・箇条書きを作る方法をご紹介いたします。

「ボックス」と「リスト・箇条書き」を別々に作り、コピー＆ペーストで合体

「ボックス」と「リスト・箇条書き」を別々に作り、コピー＆ペーストで合体する方法をご紹介します。

まず、ボックスを作ります。

「スタイル」→「デフォルトパーツ」→「ボックス」を選択（使いたいボックスが決まっている場合は、「スタイル」→「ボックス」→「好きなボックス」を選択してください）

以下のように、ボックスができます。

次に、ボックスの外にリストを作ります。

リストは「番号なしリスト」「番号付きリスト」どちらの操作も同じ。今回は「番号なしリスト」を選択。

以下のように、リストができます。

作ったリストを範囲選択して

ボックスの中にペーストしたら完成！

意外とシンプルな解決策！

ビジュアルエディタ上でボックス内にリスト・箇条書きを作るなら、これが基本操作かな

テキストエディタで直接htmlを編集する

テキストエディタで直接htmlを編集する方法をご紹介します。

まず、ボックスのhtmlタグを確認します。

「スタイル」→「デフォルトパーツ」→「ボックス」を作ります。

これをテキストエディタで見てみると、こんなhtmlタグになっています。

<div class=”ep-box”></div>

これがボックスの基本のhtmlタグだよ

次に、リストのhmtlタグを確認します。

「番号なしリスト」からリストを作成。

これをテキストエディタで見てみると、こんなhtmlタグになっています。

<ul>
<li>テスト</li>
<li>テスト</li>
<li>テスト</li>
</ul>

これがリストの基本のタグだね

あとは、ボックスのタグ内に、リストのタグを入れればOK！

このようにボックスのタグ内に、リストのタグを入れます。

<div class=”ep-box”>
<ul>
<li>テスト</li>
<li>テスト</li>
<li>テスト</li>
</ul>
</div>

これをビジュアルエディタで確認すると、ボックス内にリストができています。

操作で行き詰った時は、テキストエディタでタグ構造を確認すると理解しやすいね✨

ちなみに、「番号付きリスト」のタグはこちら↓

<div class=”ep-box”>
<ol>
<li>テスト</li>
<li>テスト</li>
<li>テスト</li>
</ol>
</div>

1. テスト
2. テスト
3. テスト

番号なしリストは<ul>
番号付きリストは<ol>

他のサイトからコピー＆ペーストする（このサイトからコピペOK）

他のサイトからコピー＆ペーストする方法をご紹介します。

もうそのまんま「ボックス内リスト・箇条書き」の部分をコピペしてください。

• PCでサイトを開く
• ボックス内リスト・箇条書き部分をコピー
• ビジュアルエディタに張り付け

ぶっちゃけコレが一番簡単（笑）

例えば、この記事のこの部分↓

これを範囲選択して、ビジュアルエディタに張り付けると、以下のようになります。

できてる……！

「自分で作るの……めんどくさいな」と思う方は、この記事からボックス内リスト部分をコピペして使ってください。

とりあえずコピペして、慣れたら自分で好きなようにカスタマイズしよう✨

デフォルトボックス＆番号なしリスト

デフォルトボックス＆番号付きリスト

THE THORで、ボックス内にリスト・箇条書きを作るのは簡単！

以上っ！まとめます。

1. 「ボックス」と「リスト・箇条書き」を別々に作り、コピー＆ペーストで合体
2. テキストエディタで直接htmlを編集する
3. 他のサイトからコピー＆ペーストする（このサイトからコピペOK）

どのやり方でも簡単にできるよ！

カスタマイズを目指すなら、テキストエディタで操作するのに慣れるのがおすすめ！

THE THORは最初ちょっとクセがありますが、最強のWordPressテーマだと確信しています！

私は、何度生まれ変わってもTHE THORを使う。

色々試して、使いこなしていきましょう！

以上っ！モアイでした✨

Twitterでも有益情報を発信中です！
ぜひフォローしてくださいね

---

ブログ関連おすすめ記事です✨

関連記事

【0から解説】ブログ初心者が『月1万円』＆『月1万PV』を達成した方法！【再現性大】

モアイです！ ブログ開設3か月で月1万円＆月1万PVを達成しました！ ねこさん 初心者の中の初心者だけど、月1万円稼げたよ！ いぬさん 凡人オブザ凡人だけど、月1万PVに到達！ […]

関連記事

【商品リンク】もしもアフィリエイトの『かんたんリンク』が便利過ぎる件【Rinker・カエレバ】

モアイです。 「商品リンクを使いたいけど、カエレバはちょっとめんどくさい……」 「Rinker（リンカー）も、Amazonアソシエイトに合格しないと使えない……」 え……？ もしもアフィリエイトの「かんたんリンク」はその名の[…]

関連記事

【雑記ブログ】ネタがない！記事が書けない！最強に『ひらめく』2つの方法【ブログ論】

モアイです。 「雑記ブログなのに記事が書けません！」 「ネタを仕込むのもめんどくさいんです！」 「考えるのもめんどくさくって（笑）」 えっ？ 雑記ブログは、 「ネタを仕込まなくても記事が書ける」 「ネタを考えな[…]