THE THORのアコーディオンボックスをSWELLと比較してみた。使い方からデメリットまで徹底考察

THE THORのアコーディオンボックスをSWELLと比較。使い方からデメリットまで徹底考察

THE THORの「アコーディオンボックス」とSWELLの「アコーディオンブロック」の使い方と実際に使ってみて気づいたことをまとめてみました。

THE THORが沢山おすすめされているけど、本当のところを知りたい。という方に役立つと思います。

「アコーディオンボックス」はコンテンツを一部隠す機能で、記事の長さの調節や詳細を知りたい人にだけ見せたいような場合に重宝します。

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

アコーディオンブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

他にも人気ワードプレステーマ「THE THOR」はブログ初心者におすすめなのかをいろいろな視点で検証しています。

サマリーの比較だけじゃ、
本当の違いは分からないから。
機能一つひとつ丁寧に比較してます。

この記事の目次

THE THOR アコーディオンボックス

THE THORのアコーディオンボックスは2パターン用意されています。

閉じた状態

THE THOR アコーディオンボックス クローズ状態
画像です。

開いた状態

THE THOR アコーディオンボックス オープン状態
画像です。

アコーディオンボックスの設置方法

THE THORのアコーディオンボックスはエディターの「プリセットパーツ」→「アコーディオンボックス」から設置できます。

THE THOR エディター アコーディオンボックスの設置方法

【注意】アコーディオンボックスのテキスト入力方法

THE THORのアコーディオンボックスでは改行に注意してください。

改行は「Enterキー(returnキー)」です。

アコーディオンボックス内で1度だけEnterキーを入力すると、アコーディオンボックスが2段目、3段目と多段表示できそうなイメージで表示されます。

注意したいのは、この表示はエディター内のみということです。
実際にサイトで公開すると表示されるのは1段目のみで、2段目、3段目は表示されません

THE THOR エディター アコーディオンボックス 改行に注意
THE THOR アコーディオンボックス 隠しテキスト
公開しても1段目のみ表示される

公開されたソースを確認すると、2段目、3段目のテキストを確認することができました。

つまり1度だけ改行して入力すると、隠しテキスト状態で公開されてしまいます。

THE THOR アコーディオンボックス 隠しテキストをソースで確認
ソース上は2段目、3段目が記述されている

アコーディオンボックス内での正しい改行方法

この隠しテキスト問題を回避するために、アコーディオンボックス内では「Shift+Enter(return)」コマンドで改行してください。

THE THOR アコーディオンボックス 正しい改行方法

アコーディオンボックス内で「Enterキー」を2回連続で入力するとアコーディオンボックス内でのテキスト入力を終了することができます。

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

THE THORのアコーディオンボックスは「スタイル」の「スタイルセット」と「カラーセット」を選択することでデザインを変更することができます。

THE THOR アコーディオンボックス デザインの変更方法

一度選択したスタイルを変更する場合は、選択済みのスタイルをもう一度選択して解除する必要があります。

THE THORのデザインはパターンが豊富なのが素晴らしいですが、スタイルが選択前にプレビューされません。
デザインパターンが豊富な分、プレビュー機能ないのが余計につらいです。

SWELL アコーディオンブロック

SWELLでは次のようなアコーディオンブロックを設置することができます。

アコーディオンブロックの設置方法

「ブロックを追加」から「アコーディオンブロック」を選択します。

設置したら後はいつも通りテキスト入力するだけです。
ボールド文字色などのテキスト装飾も使えます。

アコーディオンを追加したい場合は「+」マークボタンを押してください。

アコーディオンブロックのデザイン設定

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

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

SWELL アコーディオンブロック 設定項目

デフォルトで開いた状態にする

アコーディオンブロックのタイトル部分を選択した状態にすると右サイドメニューに「アコーディオン設定」という項目が表示されます。

「デフォルトで開いた状態にする」をONにすれば、アコーディオンの初期表示の状態を変更することができます。

SWELL アコーディオンブロック 開閉状態の設定
デフォルトで開いた状態にする

デフォルトで開いた状態になっています。

アコーディオンブロックのデザイン

SWELLのアコーディオンブロックはスタイルとアイコンを変更することができます。

スタイル

SWELLのアコーディオンブロックのスタイルは4パターン用意されています。

アイコン

アイコンパターンは3種類です。

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

まとめ THE THORのアコーディオンボックスは慣れないと使いづらい

THE THORのアコーディオンボックスは改行を間違えると意図せず隠しテキストが発生してしまうため、使用する際は注意が必要です。

またデザインは「スタイル」から逐一マウスドラッグで選択する必要があり、見た目のプレビューもないため、デザイン編集に時間がかかります。

よく使うアコーディオンボックスデザインはコードをテキストファイルに保存しておくなど、編集作業に工夫をしておかないと、アコーディオンボックスのデザインだけで時間がかかりそうです。

SWELLのアコーディオンブロックの方が簡単でおすすめ

一方でSWELLのアコーディオンブロックはプレビューを見ながらスタイルを選択できるので、直感的に操作ができます。

スタイルの自由度はTHE THORには及ばないものの、4パターンを手間なく設定できる作業効率の良さはピカイチです。

あえて物申すなら、アコーディオンブロックに適用できるカラーが任意で選択できたらより良いと思います。

ブログは記事の内容が一番大事ですが、せっかくならきれいに見せたいのがブロガー心だと思います。

SWELLならHTML や CSS などを勉強したことがなくても簡単にきれいなデザインに仕上げることができます。

記事は書いたけど、デザイン整えるのが大変でブログ更新を止めてしまった…なんて人もSWELLならきっと楽しく簡単にブログを書けるようになると思います。

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

THE THORのアコーディオンボックスをSWELLと比較。使い方からデメリットまで徹底考察

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

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次