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

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

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

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

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

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

ビジュアルエディター → プリセットパーツ → アコーディオンボックス → 背景スタイルorボーダースタイル

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

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

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

スタイル → カラーセット → 文字色or背景色orボーダー色

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

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

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

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

THE THOR には様々なラベルやボタン等が用意されていて便利です。 THE THOR とは？『ザ・トールレビュー』色を変更したい。そんなと[…]

ボーダースタイルのボックスのボーダーの色や太さは変更できないようです。: こちらのボーダー色は変更が可能
背景スタイルはボーダーの追加/カラー変更が可能

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

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

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

アコーディオンボックスじゃないみたいなボックス: 当サイトは背景画があるので白いボックスが見えますが背景色が白のサイトだとボックスがない状態になります。

参考：スタイルセット/カラーセット/デフォルトパーツを使ってカスタム

・THE THOR（ザ・トール）で文字の装飾を自在にコントロール

ワードプレスの有料テーマ「THE THOR」を使用しています。 THE THOR とは？『ザ・トールレビュー』多機能すぎて操作に戸惑っている人も多いかと思います。文字などの装飾関連の[…]

アコーディオンボックスは便利なボックスです。

気に入ったデザインが出来上がったテキストエディタからコードをコピーしてスタイルに設定するかテキストファイルなどにまとめて作業効率を上げましょう。