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

  • THE THORで、ボックス内にリストが作れない……
  • どうやったらボックスの中に箇条書きを入れられるの?
  • って言うかまさしくコレ!この状態を作りたいんだけど!?
モアイです!この記事ではこんなお悩みを解決していくよ✨
結論から言います!
THE THORで、ボックス内にリスト・箇条書きを作るのは簡単です!
ねこさん
初めてTHE THORを使った人の多くが、コレで困惑するよね
いぬさん
何かこう……上手く作れないんだよね💦
大丈夫!
今回は、
THE THORでボックス内にリスト・箇条書きを作る方法をご紹介します!

★この記事のポイント★

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

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

これらについて、ご紹介いたします。

最初は操作にクセを感じやすいTHE THOR。
しかし、使いこなせばマジで優秀です!
ボックス内にリスト・箇条書きを作る方法を覚えて、ブログを加速させましょう!
モアイ
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で、ボックス内にリスト・箇条書きを作る方法をご紹介いたします。

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

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

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

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

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

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

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

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

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

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

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

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

  • こんな
  • 感じに
  • なります
ねこさん
おぉー!できた!
いぬさん
意外とシンプルな解決策!
モアイ
ビジュアルエディタ上でボックス内にリスト・箇条書きを作るなら、これが基本操作かな

テキストエディタで直接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でサイトを開く
  • ボックス内リスト・箇条書き部分をコピー
  • ビジュアルエディタに張り付け
ねこさん
ぶっちゃけコレが一番簡単(笑)
例えば、この記事のこの部分↓
これを範囲選択して、ビジュアルエディタに張り付けると、以下のようになります。
いぬさん
できてる……!
「自分で作るの……めんどくさいな」と思う方は、この記事からボックス内リスト部分をコピペして使ってください。
モアイ
とりあえずコピペして、慣れたら自分で好きなようにカスタマイズしよう✨

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

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

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

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

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

以上っ!まとめます。

THE THORでボックス内にリスト・箇条書きを作る方法については以下のとおり!
  1. 「ボックス」と「リスト・箇条書き」を別々に作り、コピー&ペーストで合体
  2. テキストエディタで直接htmlを編集する
  3. 他のサイトからコピー&ペーストする(このサイトからコピペOK)
ねこさん
どのやり方でも簡単にできるよ!
いぬさん
カスタマイズを目指すなら、テキストエディタで操作するのに慣れるのがおすすめ!
THE THORは最初ちょっとクセがありますが、最強のWordPressテーマだと確信しています!
私は、何度生まれ変わってもTHE THORを使う。
色々試して、使いこなしていきましょう!
モアイ
以上っ!モアイでした✨
Twitterでも有益情報を発信中です!
ぜひフォローしてくださいね

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

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

関連記事

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

関連記事

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

スポンサーリンク