【THE THOR】ボックスをカスタマイズして効率的に使用する方法

「THORに搭載されているボックスをカスタマイズして使いたい。」

そんな方に向けて、ボックスのカスタマイズ方法を解説します。

自分でカスタマイズしたボックスを登録することで、作業は格段に速くなります!

スポンサーリンク

デフォルトのボックスとコード

カスタマイズをする前に、デフォルトで入っているボックスを一覧にしておきます。

もし元に戻したくなったら、下記一覧のコードをコピーして元に戻して下さい。

ボックスの中にコードを書き込んであります。

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

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

BIG括弧ボックス

ep-box es-Bbrackets bgc-white es-center es-bold es-FbigL

方眼ペーパーボックス

ep-box es-BpaperRight es-grid bgc-VPsky

はてなボックス

ep-box es-BmarkHatena es-borderSolidS bgc-white brc-DPblue es-radius

ビックリボックス

ep-box es-BmarkExcl es-borderSolidS brc-DPred bgc-white es-radius

Qボックス

ep-box es-BmarkQ bgc-white

Aボックス

ep-box es-BmarkA bgc-white

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

ep-box es-Bicon icon-tag bgc-VPorange

背景アイコンボックス

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

帯アイコンボックス

ep-box es-BiconObi icon-heart es-borderSolidS

ボックスのカスタマイズ方法

ボックスのカスタマイズ

WordPressのダッシュボードから、

「外観」→「カスタマイズ」→「パーツスタイル設定」→「ボックス設定」

ここで登録してあるボックスをカスタマイズ出来ます。
僕のは順番や色などカスタマイズ済みですが、こんな感じ。

「ボックス1」、「ボックス2」、、と順番に登録してあります。

登録しておくと、ビジュアルエディタの「クラシック」→「スタイル」→「ボックス」で1クリックで出せます。

試しに僕がカスタマイズした「サブタイトルボーダーボックス」を出してみるとこんな感じ。

ep-box es-BsubTradi bgc-white es-borderSolidS es-radius brc-Vorange
カスタマイズしたコードの内容
コード 意味
ep-box ボックス指定
es-BsubTradi サブタイトル
bgc-white 背景-白
es-borderSolidS ボックスを囲む実線・細さS
es-radius ボックスの角を丸くする
brc-Vorange 枠線の色-オレンジ
 
呪文!!?
 
心配しないで下さい!プリセットを使用して簡単にカスタマイズ出来ます。
まず初めに、ボックスで囲いたいところを選択します。

「スタイル」→「デフォルトパーツ」→「ボックス」

一旦デフォルトのボックスを作ります。

「スタイル」→「カラーセット」→「背景色」

ボックスの背景色を変えられます。

「スタイル」→「スタイルセット」

ここで枠線を付けたり影を付けたり、ボックスの装飾が色々出来ます。

気に入ったボックスが出来て何度も使う予定なら、「コードエディター( Ctrl + Shift + Alt + M )」に切り替えコードをコピーして、「ボックス設定」に登録しましょう。

僕はこういうシンプルボックスもよく使うので登録してあります。
  • こんな風に
  • リストを
  • 入れたりします
 
ハセガワ
オリジナルのボックスが出来ると、なんかクオリティーが上がった気がします!気がするだけ!

サブタイトル部分の背景色の変え方

ボックス設定では変えられない部分が「サブタイトルボーダーボックス」の背景色です。

「サブタイトルの背景色」、「はてなボックスのはてなカラー」、「ビックリボックスのビックリカラー」、、、などなど、これらも変更可能です。

WordPressのダッシュボードから、

「外観」→「カスタマイズ」→「パーツスタイル設定」→「その他エディタ用パーツ設定」

ここでカラー変更が可能です。
ただし、記事ごとに変えることは出来ません。一括変更です。
THOR用の色の一覧表を作りました。参考にして下さい。
関連記事

THE THOR(ザ・トール)で使用できるカラーコードの一覧表を作りました。 THE THOR カラーコード一覧表 >>スクロールできます。 ヴィヴィッド(V) ブライト(B) ディープ(DP) ライト(L)[…]

まとめ

ボックスのカスタマイズ方法について解説しました。

ブログ制作の中で頻繁に登場する大事な要素なので、統一感のある見やすいボックスを心がけましょう。

見やすいと思うサイトのボックスを参考にしてみるのもありですし、最初から入ってるやつでもカッコいいからありだと思います。

というわけで以上です!

スポンサーリンク

最新情報をチェックしよう!