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

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

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




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

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

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

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

 

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

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

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

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

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



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

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

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

 

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

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

 

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

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

関連記事

THE THOR 記事一覧 THE THOR には様々なラベルやボタン等が用意されていて便利です。 でも少し色を変えたい、なんてことありますよね。 そんなときはテキストエディタでカラーを変更すれば簡単に思ったように設定でき[…]

THOR 使う カラー 一覧

 

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

背景ダークグレイッシュスカイ/文字ライトトーンスカイ
アコーディオン内ボックスのカラーも変更可能

 

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

 

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

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

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

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

 

アコーディオンボックスじゃないみたいなボックス
当サイトは背景画があるので白いボックスが見えますが背景色が白のサイトだとボックスがない状態になります。
参考:スタイルセット/カラーセット/デフォルトパーツを使ってカスタム
関連記事

THE THOR 記事一覧 ワードプレスの有料テーマ「THE THOR」を使用しています。 多機能すぎて操作に戸惑っている人も多いかと思います。文字などの装飾関連の操作方法がやっと判明しました。 (adsbygoogle […]

THE THOR 文字 ボックス カスタマイズ

あとがき

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

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