[THE THOR(ザ・トール)]「ボックス」一覧と装飾の使い方、カスタマイズ

「THE THOR(ザ・トール)」は、記事装飾のためのパーツが大変充実しています。記事を分かりやすく見せるための「ボックス」もその一つ。デフォルトでも10種類、ボックスの中にボックスを入れ込むパーツを含めると20種類用意されています。

記事編集画面「ビジュアルエディター」左下「スタイル」タブから選べます。

「THE THOR(ザ・トール)」記事装飾「ボックス」リストとカスタマイズ方法

どんな物が揃っているのか、まずはリストアップ&自分のブログに合うようにカスタマイズする方法。覚書き。

基本のボックスのリスト

これ、カスタマイズ後だとスタイル変更されてしまって参考にならないので、画像でお見せします。

サブタイトルボーダーボックス

使い方が、ちょっと特殊で。ボックスの中にカーソルを入れた状態で、メニューの「サブタイトル編集」で編集します。

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

 

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ サブタイトルボーダーボックス
[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

BIG括弧ボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

方眼ペーパーボックス

方眼ペーパーボックス

はてなボックス

はてなボックス

ビックリボックス

ビックリボックス

Qボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

Aボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

シンプルアイコンボックス

シンプルアイコンボックス

背景アイコンボックス

背景アイコンボックス

帯アイコンボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

ボックス内ボックスのリストと使い方

「ボックス内ボックス」は、読んで字のごとく、ボックスの中にボックスを設定します。

まずはボックスを選択。その後にボックス内ボックスを選択します。

ターコイズグラデタイトル

ターコイズグラデタイトル

方眼ペーパーボックスを先に選択して、ボックス内ボックスを選択しています。

アイコンボーダータイトル

アイコンボーダータイトル

方眼ペーパーボックス

ブルーシャドータイトル

ブルーシャドータイトル

方眼ペーパーボックス

サブタイトルボーダーボックス

シンプルアイコンボックス

サブタイトルボーダーボックス

BIG括弧ボックス

方眼ペーパーボックス

BIG括弧ボックス

方眼ペーパーボックス

シンプルアイコンボックス

方眼ペーパーボックス

はてなボックス

方眼ボックス

はてなボックス

ビックリボックス

方眼ボックス

ビックリボックス

Qボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

Aボックス

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」一覧とカスタマイズ

 

「デフォルトパーツ」でオリジナルのボックスを作る

既定のボックスで気に入った物が無かった場合は、オリジナルのボックスを作ることもできます。

「スタイル」→「デフォルトパーツ」から作ります。選択肢を上下に移動する面倒くささがありますが、覚えれば簡単なので。

例えば、以下のボックスを作りたい時は、

こんにちは!

 

1. ボックスの中に入れたい文章を先に書き込む。「こんにちは!」

2. 文字をカーソルでなぞって反転させる。

3.「スタイル」一番下の「デフォルトパーツ」→「ボックス」を選択。

ザ・トール「デフォルトパーツ」でオリジナルのボックスを作る

 

4. 2つ上の「スタイルセット」→「ボーダー系」→「オール実線(細)」

ザ・トール「デフォルトパーツ」でオリジナルのボックスを作る

 

5.「スタイルセット」→「角丸系」→「角丸10px」

6. 一つ下の「カラーセット」→「ボーダー色」→「ブライトトーンマゼンタ」

以上の手順で作っています。

枠の中に入れる文字は常に反転させておくことがポイント

 

「カスタマイズ」でよく使うオリジナルボックスを登録

「THE THOR(ザ・トール)」デフォルトのボックスの中に、あまり使わないデザインがあり、自分がいつも使うデザインを都度都度作らなければならない場合は、もう登録してしまった方が早いですよね。

「ザ・トール」で使えるカラーコードを一覧にしてくださっているサイトさまを見つけたので、色替えの参考にさせていただきました。
カスログ for THE THOR

カスタマイザーのパーツ設定やテキストエディタからの投稿時に使用する、各パーツの色を指定するクラス名をまとめてみました。1…

カスタマイズで設定

「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「ボックス設定」を開きます。

エディター画面の規定は全てここで設定しなおすことができます。

「BIG括弧ボックス」や「Qボックス」など、自分は使わない気がするボックスの「スタイル」欄に変更するコードを書き入れるだけ。

シンプルなオレンジの枠

ep-box bgc-white brc-DPorange es-borderSolidS
 シンプルなオレンジの枠

シンプルなグリーンの枠

ep-box bgc-white brc-DPgreen es-borderSolidS
シンプルなグリーンの枠

シンプルイエローボックス

ep-box bgc-VPorange
シンプルイエローボックス

補足「シンプルアイコンボックス」”ep-box es-Bicon icon-tag bgc-VPorange” からアイコンを外しただけ。

「背景アイコンボックス」のアイコンを変更

ep-box es-BiconBg icon-pushpin bgc-VPlime

補足“icon-pushpin”をよく使うアイコンに変更。

背景メモアイコンボックス

「帯アイコンボックス」のアイコンと色を変更

ep-box bgc-VPgreen es-BiconObi es-radius es-shadow icon-checkmark2
帯アイコンボックス

補足帯アイコンのバックカラーが赤から変更できないという方は、アイコンカラーの変更をすれば変わります。

「アイコンカラー」の色変更は、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「その他エディタ用パーツ設定」→「アイコン系パーツのアイコンカラー」から行います。

[THE THOR(ザ・トール)]「ボックス」一覧と装飾の使い方、カスタマイズ 帯アイコンボックスの帯の色…
ここを変更するとブログ中の全てのアイコンカラーがその色になってしまうので気を付けて。

「サブタイトルボーダーボックス」の枠色を変更する

ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred

本来ならばカラーだけ変更すれば変わるような気がしたのですが、サブタイトルの部分だけがどうしても赤から変更されません。

「サブタイトルボーダーボックス」の色変更は、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「その他エディタ用パーツ設定」から行います。

[THE THOR(ザ・トール)]ビジュアルエディタでの「ボックス」サブタイトルボーダーボックスカスタマイズ

 

オレンジ枠のサブタイトルボーダーボックス

 

関連記事

ワードプレスのテーマを「Simplicity2」から「THE THOR(ザ・トール)」へ変更した際に、ボックスやボタンなどの記事装飾を一括で置き換えする方法です。(コードは「Cocoon」にも適用できます) あくまでも、「私はこうした」と[…]

フレームあるいはテーマ
サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』