【作り方解説】FAQ(よくある質問)をTHE THORとSWELLで作ろう

記事内にプロモーションを含む場合があります。
FAQブロックで比べてみるTHE THORとSWELL

THE THORとSWELLで「FAQ(よくある質問)」を作ってみました。

THE THORとSWELLのFAQ機能を比べてみて、わたしなりに気が付いたことをまとめています。

このブログはきっとこんな人に役立つと思います。

  • THE THORが本当におすすめなのか気になっている
  • THE THORが使いこなせるのか心配
  • THE THOR以外のワードプレステーマ候補を探している

この記事のSWELL公式マニュアルはこちら

【SWELLブロック】Q&Aを簡単に設置!FAQブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

THE THOR FAQボックス

THE THORのFAQはエディターのスタイルから作成します。

デフォルトでは次のFAQデザインが用意されています。

THE THOR パーツスタイル デフォルトボックス FAQ

THE THORのFAQは専用ブロックではなく、テキスト装飾です。

デフォルトFAQボックスの設置方法

デフォルトのFAQボックスはエディターの「スタイル」→「ボックス」から設置できます。

THE THOR エディター スタイル Qボックス Aボックス

ボックス内にFAQボックスを追加したい場合は「ボックス内ボックス」のFAQボックスを選択してください。

THE THOR エディター スタイル ボックス内ボックス Qボックス Aボックス

デザインのカスタマイズ方法

THE THORでFAQボックスのデザインを変更する方法は2つあります。

  1. エディターで一から組み上げる
  2. パーツスタイル設定機能でオリジナルのコードを登録する

順番に解説していきます。

1 エディターで一から組み上げる

THE THORではエディターの「スタイル」内にある「デフォルトパーツ」を使うと、好きなパーツやカラーを組み合わせて、オリジナルのボックスを作ることができます。

THE THOR エディター スタイル デフォルトパーツ ボックス

デフォルトパーツのボックスを設置するとグレー背景のボックスが設置されます。

THE THOR エディター デフォルトパーツ ボックス

この状態から追加したいパーツやカラーなどの要素をひとつずつ指定していきます。

追加したい要素は「スタイルセット」と「カラーセット」から選択します。

THE THOR エディター スタイルセット カラーセット

試しに背景色やボーダーの色を変えてみました。

THE THOR アレンジ Qボックス Aボックス

パーツスタイル設定に登録したボックスにスタイルを追加することもできますが、一部スタイルが反映されないバグのようなものがあります(例:背景色が追加できない)。

パーツスタイル設定のボックスの追加装飾はおすすめしません。

2 パーツスタイル設定から作成する

パーツスタイル設定とは、あらかじめ任意のボックスデザインを登録しておく機能です。

この方法だと、デフォルトパーツからデザインするよりも複雑なデザインが可能です。

実際に記事内に設置するときは、エディターの「スタイル」→「ボックス」から選択するだけなので、設置作業も簡単です。

ただし、デザインのコードはご自身で記述する必要があるのと、ボックスの保存上限数が10個までという点に注意が必要です。

「スタイル」→「ボックス」で設置するボックスの登録方法は別の記事で詳しく解説しています。

THE THOR ボックスの登録方法

THE THORのコードは覚えるのが大変なので、このブログでは紹介しませんが、他のブログでボックスのデザインサンプルコードを紹介しているので、「THE THOR ボックスデザイン」などで検索してみてください。

THE THOR ボックス設置方法のプロコンまとめ

1 エディターで一から組み上げる

  • エディター上で作成できる
  • すこしデザイン変えるだけならこちらが手軽
  • 複雑なデザインには向かない
  • 作成に時間がかかる

2 パーツスタイル設定から作成する

  • 複雑なデザインが可能
  • 登録したボックスの設置が簡単
  • デザインを決めるコードの理解・記述が必要
  • ボックスの登録は10個まで

SWELL FAQブロック

SWELLでは『FAQブロック』を使ってFAQコンテンツを作成することができます。

FAQブロックの設置方法

「ブロックを追加」から「FAQブロック」を選択します。

SWELL エディター ブロックの追加 FAQブロック

初期状態では2セット分のQ&Aが設置されます。

SWELL FAQブロック デフォルト

Qブロックにはテキストだけ入力することができます。
Aブロックには「段落」「リスト」「画像」の3ブロックを使うことができます。

FAQを3つ、4つと増やしたい場合は、FAQブロックを選択したときに左下に表示される「+アイコン(項目を追加)」を押してください。

SWELL エディター FAQアセットの追加

FAQブロックのデザイン設定

設置した「FAQブロック」を選択すると右サイドメニューにFAQブロックの設定パネルが表示されます。

SWELL エディター FAQブロック 設定パネル

プレビューをクリックするだけでスタイルやアイコンカラーを変更することができます。

FAQブロック設定項目一覧

SWELL FAQブロック 設定項目一覧

FAQブロックのデザイン

SWELLのFAQブロックはFAQ全体のスタイルとアイコンの形、アイコンの色を変更することができます。

スタイル

FABボックス全体のデザインを4パターンから選ぶことができます。

SWELL FAQブロック スタイル シンプル
シンプル
SWELL FAQブロック スタイル 線あり
線あり
SWELL FAQブロック スタイル ボックス
ボックス
SWELL FAQブロック スタイル ストライプ
ストライプ
アイコンの形

3種類の形を選択できます。

Q/Aに同じ形が適用されます。

SWELL FAQブロック アイコンの形
アイコンの色

6種類のカラーパターンが用意されています。

Qアイコンの色とAアイコンの色を別々に指定できます。

SWELL FAQブロック Qアイコンの色
SWELL FAQブロック Aアイコンの色

すべてプレビューで確認しながら設定できて、一度選択したデザインの変更も簡単です。

まとめ FAQ機能はバランスの良いSWELLがおすすめ

ブログ初心者にTHE THORのボックス装飾は難しい

THE THORのFAQはボックスのデザインコードをカスタマイズすれば好みのFAQボックスを作ることができます。

他のサイトとデザインが被りたくない人に向いているかもしれません。

一方で、ボックスをデザインするためには、コードの理解と記述が必要であること、ボックスの登録上限数は10個であることは注意が必要です。

THE THORではQボックスとAボックスは別物扱いなので、両方ともボックス登録する場合、登録数を2つ消費することになります。

FAQボックス以外にも、サブタイトルボックスや注意喚起ボックスなどよく使うであろうボックスは結構あるため、同系統のボックスを複数登録しておく余裕はありません。

いろいろなデザインを登録しておきたい人にTHE THORのこの仕様は向かないと思います。

THE THORのボックスで注意すべきこと
  • スタイルの選択作業が辛い(選択ミス多発)
  • プレビュー機能がないので、決定するまで適用されるデザインが分からない
  • 一度設定したデザインの変更作業が大変
  • デザインを決めるコードの理解・記述が必要
  • 登録できるボックスの数が10個まで

THE THORのボックス機能で気になるところは別の記事でも詳しく紹介しています。

SWELLは設置が簡単、デザインも良くてバランス◎

SWELLのFAQボックスはプレビューで確認しながら設定できるのでブログ初心者にもやさしいです。

デザインはどのサイトにも馴染みやすいスタイル・カラーパターンがあらかじめ用意されています。

CSSのカスタマイズも不要なのは嬉しいですね。

SWELLを使うようになって、デザインに頭を悩ますことがなくなりました
ブログを書くことに集中できます。

THE THORはボックスのカスタマイズ性が高いですが、コードの理解とクラシックエディター特有の手間に立ち向かう必要があります。

きれいな、見やすいブログにしたいけど、デザインには自信がない or 手間をかけたくない人にはTHE THORよりもSWELLがおすすめです。

ボックス機能の関連記事

もっと気軽に、楽しく記事を書こう。

FAQブロックで比べてみるTHE THORとSWELL

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

よかったらシェアしてね!
  • URLをコピーしました!
この記事の目次