THE THOR ザ・トール アコーディオンボックスの使い方

アコーディオンボックスは使い方次第で様々な表現ができる便利なボックスです。

THE THORの標準で装備されているアコーディオンボックスの使い方を詳しく見てみましょう。

THE THORの標準アコーディオンボックスは2種類

アコーディオンボックスはビジュアルエディターのプリセットパーツから設置できます。

標準アコーディオンボックスのサンプル

背景スタイルサンプル

これが標準のアコーディオンボックス背景スタイルです。
改行はshift+returnで行います。

ボーダースタイルサンプル

これが標準のアコーディオンボックスボーダースタイルです。
要素をコピペするとボックス内ボックスができてしまうので気をつけましょう。

アコーディオンボックスの使い方 注意点

• 基本的には前述通りビジュアルエディタで設置
• アコーディオンボックス内の改行はshift+return
• returnで改行すると表示されないボックスが生成されます
• アコーディオンボックスを終了させるにはreturn×2回

THE THOR全般に言えることですが、操作に少しクセがあるように感じます。作った方のクセなのか、統一してこのような操作系統にしたのかはわかりませんが、パターンはあるので慣れるまで頑張りましょう！

アコーディオンボックスに色をつける

アコーディオンボックスに色をつけるには通常のボックスと同様の操作をします。

変更例.
アコーディオンボックスを設置すると上部ボックスに「タイトル」と表示されます。「タイトル」という文字を選択してカラーセットから背景色などを変更します。

※カラーは重複して選択ができてしまうので、必ず前に選択したカラーを解除（再選択かコマンド+z）してから別のカラーを選びましょう。

カラーについてはこちらを参照してください。

・THE THOR（ザ・トール）のショートコードで使用するカラーコード一覧表

あわせて読みたい

THE THOR ザ・トール スタイルで使用するカラーコード一覧表 THE THOR のショートコードで使用するカラーコードの一覧表。

アコーディオンボックスのカラー変更サンプル

背景ダークグレイッシュスカイ/文字ライトトーンスカイ

アコーディオン内ボックスのカラーも変更可能

ボーダースタイルのボックスのボーダーの色や太さは変更できないようです。

こちらのボーダー色は変更が可能
背景スタイルはボーダーの追加/カラー変更が可能

アコーディオンボックスのカスタムは色の変更だけでなく様々なカスタムが可能です。使いやすくプリセットされたパーツというだけなので通常のボックスと同様にスタイルセット/カラーセット/デフォルトパーツで自由にカスタムできます。

※スタイルのボーダースタイルより背景スタイルのほうが自由度が高いのでオリジナルを作る場合は背景スタイルをベースにカスタムしましょう。

背景スタイルをカスタムしたサンプル

ポップなアコーディオン

背景スタイルなら
ボーダーの追加、色の変更も可能。
シャドウをつけたり
文字サイズの変更も可能です。
ボックス内ボックスも利用できるので
工夫次第で様々な表現ができます。
中にボタンも可能

アコーディオンボックスじゃないみたいなボックス

当サイトは背景画があるので白いボックスが見えますが背景色が白のサイトだとボックスがない状態になります。

あわせて読みたい

THE THOR ザ・トール 文字の装飾を自在にコントロール THE THOR で自在にボックスなどを作る手順。

【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)｜テーマ＆サポートプラン