THE THOR

THE THORのスタイル装飾一覧!マーカー・ラベル・ボタン・ボックスのデフォルト設定まとめ

このブログのテーマでも利用しているTHE THOR(ザ・トール)ですが、装飾ボタンの種類が多すぎてどれを使ったらいいか迷いますよね。

THE THOR(ザ・トール)は便利な装飾機能がありすぎて、正直、慣れるまで時間がかかります。

そこで、THE THOEを利用しようかまだ迷っている人、THE THORを導入したばかりで記事のスタイル装飾が網羅できていないという人向けに、すぐに使える5種類のスタイル装飾のデフォルト設定をまとめてみました。

  • マーカー
  • ラベル
  • ボタン
  • ボックス
  • ボックス内ボックス

WordPressのテーマ、THE THOR(ザ・トール)の初心者さん必見です。

THE THORの記事投稿のスタイル装飾まとめ

ビジュアル画面の一番左のスタイルをクリックすると、THE THORの設定された5種類のスタイル装飾が表示されます。

デフォルト設定を一覧にまとめたので、あとで紹介するTHE THORのスタイル設定変更の際にも参考にしてみてください。

THE THOR  マーカー一覧

マーカー(太) マーカー(中) マーカー(細)
マーカー(太)レッド マーカー(中)レッド マーカー(細)レッド
マーカー(太)ブルー マーカー(中)ブルー マーカー(細)ブルー
マーカー(太)イエロー マーカー(中)イエロー マーカー(細)イエロー
マーカー(太)ピンク マーカー(中)ピンク マーカー(細)ピンク
マーカー(太)グリーン マーカー(中)グリーン マーカー(細)グリーン
マーカー(太)グレー マーカー(中)グレー マーカー(細)グレー

装飾はセンスや好みによりけりで決まりはありませんが、読者さんが読みやすい装飾を心がけることが大切ですよね。

目立たせたい色、またはテーマカラーに合う色で装飾をしていくと、違和感なく文章を読むことができます。

なこ
マーカーの太さは3種類・色は6種類です。

THE THOR ラベル一覧

タイトル スタイル
角丸レッドラベル ep-label bgc-DPred brc-white ftc-white es-radius es-RpaddingSS es-LpaddingSS
シンプルボーダーラベル ep-label es-borderSolidS bgc-white brc-VLgray es-RpaddingSS es-LpaddingSS
ライム左ラウンドラベル ep-label es-LroundL bgc-Blime ftc-white es-RpaddingSS es-LpaddingSS
ブルーボーダーラウンドラベル ep-label es-round es-borderDashedS brc-Lblue bgc-VPblue es-RpaddingSS es-LpaddingSS
丸アイコンオレンジラベル ep-label icon-pencil2 es-LiconCircle es-LroundL bgc-VPorange ftc-Borange es-RpaddingSS
ピンクアイコンラベル ep-label es-LiconBorder icon-notification es-RpaddingSS bgc-VPpink ftc-Bpink
四角アイコンラベル ep-label es-LiconBox icon-location es-borderSolidS brc-VLgray ftc-Dgray
破線ボーダーアイコンラベル ep-label es-BborderDashedM bgc-white es-Licon icon-pushpin es-RpaddingSS es-bold
ビッグ右ラウンドブルーラベル ep-label es-LroundR es-TmarginS es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-Fbig es-bold es-LborderSolidM brc-DLsky bgc-VPblue ftc-DGblue
ターコイズグラデ右寄せラベル ep-label es-grada2 bgc-DLturquoise ftc-white es-size25 es-right es-RpaddingS es-LborderSolidM brc-DGturquoise
ラベルは、ボックスのコーナータイトルにすることも可能です。ラベル専用の部分的な「ラウンド左・ラウンド右」もできます。
なこ
10種類のラベルが設定されています。

THE THOR ボタン一覧

タイトル スタイル
オレンジ100%ボタン ep-btn bgc-Vorange es-size100 ftc-white es-TpaddingS es-BpaddingS es-BTarrow es-bold
グリーンシャドウボタン ep-btn bgc-Bgreen ftc-white es-size100 es-TpaddingS es-BpaddingS es-shadowIn es-BTarrow es-bold es-radius
ブルーボタン ep-btn es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-Fbig es-bold es-borderSolidS bgc-white brc-DLblue ftc-DLblue es-BTarrow
ブルーグラデボタン ep-btn es-BTrich bgc-DPsky ftc-white es-BTarrow es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-grada1
ピンクアイコンボタン ep-btn icon-circle-right es-BTicon bgc-VPmagenta ftc-Lmagenta es-bold es-borderSolidS brc-Lmagenta es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM
ピンクグラデアイコン ep-btn es-grada2 ftc-white es-radius icon-home es-BTicon es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM bgc-Bmagenta
グリーン立体アイコンボタン ep-btn icon-amazon es-BTiconBorder es-BT3d es-radius bgc-DLlime ftc-white es-TpaddingS es-BpaddingS es-shadow
グレーラウンドアイコンボタン ep-btn es-grada2 es-TpaddingS es-BpaddingS es-BTiconBorder icon-folder-open es-Fsmall es-round es-RpaddingM es-LpaddingM ftc-gray
サークルアイコンボタン ep-btn icon-pencil2 es-BTiconCircle es-round es-BT3d es-RmarginM bgc-VPorange ftc-DLorange es-bold
ボックスアイコンボタン ep-btn es-BTiconBox icon-quill bgc-DGorange ftc-white es-radius

THE THORは初心者でもこのまま利用できそうなボタンがすでに設定されています。色を変えたり、アイコンを変更して自分好みにカスタマイズもしやすいです。

なこ
10種類のボタンが設定されています。

THE 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 icon-heart es-BiconObi es-borderSolidS
なこ
10種類のボックスが設定されています。

THE THOR ボックス内ボックス一覧

タイトル スタイル
ターコイズグラデタイトル
ep-inbox es-Bwhole es-grada1 es-bold bgc-DLturquoise ftc-white es-center es-FbigL
アイコンボーダータイトル
ep-inbox es-Bwhole bgc-white es-borderSolidS brc-VLgray es-bold es-Bicon icon-pencil2 es-FbigL
ブルーシャドウタイトル
ep-inbox es-Bwhole bgc-DPsky ftc-white es-FbigL es-center es-bold es-TshadowD es-shadow es-BborderSolidM brc-white
サブタイトルボーダーボックス
ep-inbox es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred
BIG括弧ボックス
ep-inbox es-Bbrackets bgc-white es-center es-bold es-FbigL
方眼ペーパーボックス
ep-inbox es-BpaperRight es-grid bgc-VPsky
はてなボックス
ep-inbox es-BmarkHatena es-borderSolidS bgc-white brc-DPblue es-radius
ビックリボックス
ep-inbox es-BmarkExcl es-borderSolidS brc-DPred bgc-white es-radius
Qボックス
ep-inbox es-BmarkQ bgc-white
Aボックス
ep-inbox es-BmarkA bgc-white

デフォルトパーツのグレーのボックスのの中に、ボックス内ボックス一覧を作ってみました。

上の3種類以外は、ボックスと同じスタイルですね。

なこ
10種類のボックス内ボックスされています。

 

【THE THOR】パーツスタイルのカスタマイズ方法

マーカー設定のカスタマイズ

カスタマイズ>パーツスタイル設定[THE]

カスタマイズすることはできませんが「よく使うマーカー設定」のみ設定することができます。

なこ
よく使うマーカー設定のみ設定可能です!

ラベル・ボックス・ボックス内ボックスの設定

 

カスタマイズ>パーツスタイル設定[THE]

ラベル、ボタン、ボックス、ボックス内ボックスは、自由にカスタマイズすることができます。デフォルトのラベルを組み合わせることによって、好みのラベルを設定しておくことができるので便利です。

なこ
それぞれ最大10種類まで自由に設定可能です!

おまけ:アイコンオプション

投稿の編集画面>アイコンオプション

左のラベルパーツのアイコンの「余白・ボーダー・ボックス・サークル」から選ぶことができますよ。

なこ
アイコンは記事装飾以外にブログのトップページなどにも利用できますよ。

まとめ:THE THOR(ザ・トール)の装飾は自由自在!

いかがでしたか?

THE THOR(ザ・トール)のスタイル装飾は自由にカスタマイズすることができます。

WordPressのテーマ「THE THOR(ザ・トール)」を利用すれば、記事装飾用のプラグインはほとんど必要ありません!
THE THORを購入したい方はこちらの公式サイトから購入できます。

THE・THOR(ザ・トール)の公式サイトへ

ABOUT ME
naco
20代IT系夫婦の旅好き妻とゲーム好き夫。新卒入社企業SIerSEを退職し、Webフリーランスに。メディア制作企業よりWEBディレクター受託・個人事業主向けWebコンサルとして活動中。