【THE THORパーツカスタマイズ】ボックス・見出し・ボタン・吹き出しなど17種類

パーツカスタマイズまとめ
初心者さん
初心者さん

・THE THORを使っておしゃれなブログを作りたい。

・THE THORのボタン・ボックス・見出しの色を変えたい

・THE THORの記事装飾パーツは、どんなデザイン?

 

Chiharu
Chiharu

ブログ記事作成に記事装飾パーツは欠かせません。

THE THORで使える記事装飾パーツのカスタマイズ方法をお伝えします。

 

THE THORの記事装飾パーツは、色・余白・フォントサイズ・影・背景色などをカスタマイズすることができます。

 

THE THORのデフォルト記事装飾パーツはおしゃれですが、色をカスタマイズすることで統一感が出たり、線の太さをカスタマイズすることで繊細な印象になったりと自分の好みに近づけることができるので、ぜひカスタマイズをお試しください。

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

THE THORの記事装飾パーツについて

 

本来、CSSというコードを使って記事装飾パーツの色やデザインを指定するのですが、THE THORの記事装飾パーツはCSSとTHE THOR専用のコードを組み合わせて指定されています。

 

そのため、色やデザインなどは、ある程度決められた範囲のカスタマイズになりますが、専門知識がない初心者さんにも簡単にカスタマイズすることができます。

 

パーツコード

 

例えば、ラベルの背景色をブルーからオレンジに変更するには、下記のコードの「bgc-blue」を「bgc-Lorange」に変更します。

 

変更前のコード
<span class=”ep-label bgc-blue brc-white ftc-white es-radius es-RpaddingSS es-LpaddingSS”>ラベル</span>
変更後のコード
<span class=”ep-label bgc-Lorange brc-white ftc-white es-radius es-RpaddingSS es-LpaddingSS”>ラベル</span>

 

記事装飾パーツのコードは、投稿や固定ページのテキストモード、またはカスタマイザーで確認することができます。

 

コードの確認
投稿・固定ページをテキストモードに変えるとコードの確認ができます。

 

コードの確認

カスタマイザー>パーツスタイル設定>ラベル設定・ボタン設定などの確認したいパーツ設定

スタイルに表示されているのがコードです。

 

THE THOR記事装飾パーツのカスタマイズ方法とパーツの登録方法

 

THE THOR記事装飾パーツは、3つのカスタマイズ方法があります。

 

1.スタイルを使う
2.カスタマイザーにコードを直接入力
3.テキストモードにしてコードを直接入力

 

【カスタマイズ1】スタイルを使う

 

スタイルを利用してカスタマイズする方法は、固定ページ・投稿ページの「スタイル」を使います。

 

スタイル
向かって左側にあるのが「スタイル」です。

 

ラベルカスタマイズ

  1. 表示させたい文字を入力
  2. 文字に網かけ
  3. 「スタイル」をクリックして、「デフォルトパーツ」からラベル・ボタン・ボックスから好きなパーツを選んでクリック
  4. 「スタイルのスタイルセット」から装飾を「スタイルのカラーセット」から色を選んでクリック

 

スタイルセット・カラーセットは、複数選択が可能なので好みに合わせて組み合わせてください。

 

ダッシュボード パーツ

パーツが作成できたら

  1. テキストモードに変える
  2. コードの ”  ” の間をコピーします

 

カスタマイザー パーツ

ダッシュボード>外観>カスタマイザー >パーツスタイル設定>ボタンやラベルなどの登録したいパーツ

「タイトル」に自分で決めたパーツの名前を入力して、「スタイル」コピーしたコードを貼り付けます。

カスタマイザー公開 をクリックで登録完了です。

 

ダッシュボード パーツ
パーツが登録されると、投稿・固定ページのスタイルに表示されるようになります。

 

【カスタマイズ2】カスタマイザーにコードを直接入力

 

THE THORのカスタマイザーを使ってパーツカスタマイズする方法とパーツの登録方法をお伝えします。

 

the thor パーツ
ダッシュボード>外観>カスタマイズ>パーツスタイル設定>ボタンやラベルなどカスタマイズしたいパーツを開きます。

 

the thor パーツ
上書きするパーツの「タイトル」と「スタイル」を削除します。

 

カスタマイザー パーツ

「タイトル」に自分で決めたパーツの名前を入力して、「スタイル」にコードを半角スペースあけ、続けてコードを入力します。

例えば、ep-label bgc-DPred brc-white ftc-white のように入力します。

最後にカスタマイザー公開 をクリックで登録完了です。

 

ダッシュボード パーツ
パーツが登録されると、投稿・固定ページのスタイルに表示されるようになります。

 

【カスタマイズ3】テキストモードにしてコードを直接入力

 

テキストモードにしてコードを直接入力する方法は、固定ページ・投稿ページのテキストモードに変えコードを直接入力していきます。

 

下記のように直接コードを入力していきます。

<span class=”ep-label bgc-white ftc-Llime brc-Llime es-borderSolidS es-RpaddingS es-LpaddingS es-radius”>ボタン</span>

 

<span class=”  “>ボタンなどに表示する文字</span>の ”  ” 間にコードを入力します。コードは半角スペースを入力すれば複数のコードを入力することができます。

 

テキストモード
「テキスト」をクリックすると、テキストモードになります。

 

パーツのカスタマイズができたらカスタマイザーに登録をします。

 

ダッシュボード パーツ
  1. テキストモードに変える
  2. コードの ”  ” の間をコピーします

 

カスタマイザー パーツ

ダッシュボード>外観>カスタマイザー >パーツスタイル設定>ボタンやラベルなどの登録したいパーツ

「タイトル」に自分で決めたパーツの名前を入力して、「スタイル」コピーしたコードを貼り付けます。

カスタマイザー公開 をクリックで登録完了です。

 

ダッシュボード パーツ
パーツが登録されると、投稿・固定ページのスタイルに表示されるようになります。

 

登録できるTHE THORの記事装飾パーツ

 

登録できるTHE THORの記事装飾パーツは17種類。記事装飾パーツごとのカスタマイズ方法と登録方法をお伝えしていきます。

 

  1. よく使うマーカーの指定
  2. ラベルデザイン10種類の登録
  3. ボタンデザイン10種類の登録
  4. ボックスデザイン10種類の登録
  5. はてなボックスのはてなカラーの指定
  6. ビックリボックスのビックリカラーの指定
  7. QボックスのQカラーの指定
  8. AボックスのAカラーの指定
  9. サブタイトルボックスの文字色・背景色・線色の指定
  10. ボックス内ボックスデザイン10種類の登録
  11. 共通ボタンの文字色・背景色の指定
  12. 見出しのデザイン・色の指定
  13. リスト・番号付きリストのデザイン・色の指定
  14. 吹き出しのデザイン・画像・文字色・背景色・線色の指定
  15. 引用のデザイン・色の指定
  16. テーブルのデザイン文字色・線色・背景色の指定
  17. SNSシェアボタンのデザインの指定

 

【THE THORパーツ1】マーカー

 

THE THORのデフォルトで備えられているマーカーは、こちらの18種類。

 

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

 

よく使うマーカー

THE THORは、よく使うマーカーを指定することができるので呼び出すのが楽になります。

よく使うマーカーは、一番上に表示されます。

 

よく使うマーカー
  1. カスタマイザー
  2. パーツスタイル設定
  3. マーカー設定
  4. 見出しデザインの設定

マーカーの色を選択してカスタマイザー公開 をクリックで登録完了です。

 

【THE THORパーツ2】 ラベル

 

THE THORのデフォルトで備えられているラベルは下記の10種類。10種類のラベルを登録できます。

 

ただし、上書きしかできないので、新しくラベルを登録すると以前のラベルが使えなくなってしまうので、ご注意ください。

 

角丸レッドラベル

ライム左ラウンドラベル

丸アイコンオレンジラベル

四角アイコンラベル

ビッグ右ラウンドブルーラベル

シンプルボーダーラベル

ブルーボーダーラウンドラベル

ピンクアイコンラベル

破線ボーダーアイコンラベル

ターコイズグラデ右寄せラベル

 

ラベルカスタマイズ

  1. 表示させたい文字を入力
  2. 文字に網かけをする
  3. 「スタイル」をクリック「デフォルトパーツ」からラベル・ボタン・ボックスから好きなパーツを選んでクリック
  4. 「スタイルのスタイルセット」から装飾を「スタイルのカラーセット」から色を選んでクリック

    スタイルセット・カラーセットは、複数選択が可能なので好みに合わせて組み合わせてください。

 

ラベル
  1. コードをコピー
  2. カスタマイザー
  3. パーツスタイル設定
  4. ラベル設定
  5. ラベル1の設定見出しデザインの設定

タイトルとスタイルを入力 カスタマイザー公開 をクリック

ラベル

 

下記のようにアイコンに背景色が指定されているラベルは、アイコンの背景色をカスタマイズすることができます。
(アイコンの色は白で固定)

丸アイコンオレンジラベル
四角アイコンラベル

アイコンに背景色を指定しているすべてのパーツに同じ色が反映されますので、ご注意ください。設定方法は下記を参考にしてください。

アイコン背景色
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. アイコン系パーツのアイコンカラー

色を指定をしてカスタマイザー公開 をクリック

 

【THE THORパーツ3】 ボタン

 

THE THORのデフォルトで備えられているボタンは下記の10種類。10種類のボタンを登録できます。ただし、上書きしかできないので、新しくボタンを登録すると以前のボタンが使えなくなってしまうので、ご注意ください。

 

 

ラベルカスタマイズ

  1. 表示させたい文字を入力
  2. 文字に網かけをする
  3. 「スタイル」をクリック「デフォルトパーツ」からラベル・ボタン・ボックスから好きなパーツを選んでクリック
  4. 「スタイルのスタイルセット」から装飾「スタイルのカラーセット」から色を選んでクリック

    スタイルセット・カラーセットは、複数選択が可能なので好みに合わせて組み合わせてください。

 

ボタン登録
  1. コードをコピー
  2. カスタマイザー
  3. パーツスタイル設定
  4. ボタン設定
  5. ボタン1の設定見出しデザインの設定

タイトルとスタイルを入力してカスタマイザー公開 をクリック

ボタン

 

下記のようにアイコンに背景色が指定されているボタンは、アイコンの背景色をカスタマイズすることができます。
(アイコンの色は白で固定)

アイコンに背景色を指定しているすべてのパーツに同じ色が反映されますので、ご注意ください。設定方法は下記を参考にしてください。

アイコン背景色
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. アイコン系パーツのアイコンカラー

色を指定をしてカスタマイザー公開 をクリック

 

【THE THORパーツ4】 ボックス

 

THE THORのデフォルトで備えられているボックスは下記の10種類。10種類のボックスを登録できます。ただし、上書きしかできないので、新しくボックスを登録すると以前のボックスが使えなくなってしまうので、ご注意ください。

 

サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス
シンプルアイコンボックス
背景アイコンボックス
帯アイコンボックス

 

ラベルカスタマイズ

  1. 表示させたい文字を入力
  2. 文字に網かけをする
  3. 「スタイル」をクリック「デフォルトパーツ」からラベル・ボタン・ボックスから好きなパーツを選んでクリック
  4. 「スタイルのスタイルセット」から装飾を「スタイルのカラーセット」から色を選んでクリック

    スタイルセット・カラーセットは、複数選択が可能なので好みに合わせて組み合わせてください。

 

ボックスの登録
  1. コードをコピー
  2. カスタマイザー
  3. パーツスタイル設定
  4. ボックス設定
  5. ボックス1の設定見出しデザインの設定

タイトルとスタイルを入力してカスタマイザー公開 をクリック

ボックス

 

【THE THORパーツ5】 はてなボックス

 

はてなボックス

 

THE THORのはてなボックスは、 はてな を好きな色を変えることができます。

 

はてなボックス
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. はてなボックスのはてなカラー

アイコンの色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ6】ビックリボックス

 

ビックリボックス

 

THE THORのビックリボックスは、 びっくり を好きな色を変えることができます。

 

ビックリボックス
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. ビックリボックスのビックリカラー

アイコンの色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ7】Qボックス

 

Qボックス

 

THE THORのQボックスは、 キュー 部分を好きな色を変えることができます。

 

Qボックス
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. QボックスのQカラー

アイコンの色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ8】Aボックス

 

Aボックス

 

THE THORのAボックスは、 えー を好きな色を変えることができます。

 

Aボックス
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. AボックスのAカラー

アイコンの色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ9】サブタイトルボックス

 

サブタイトルボックス

 

THE THORのサブタイトルボックスは、サブタイトルの文字色・背景色・線色を変えることができます。

 

サブタイトルボックス
  1. カスタマイザー
  2. パーツスタイル設定
  3. その他エディタ用パーツ設定
  4. サブタイトルのボックスカラー

サブタイトルボーダーボックス 文字色・背景色・線色の色を指定してカスタマイザー公開 をクリック

サブタイトル(シンプル)・サブタイトル(ラウンド)はイメージカラーが反映されるようになっているので、カスタマイザーからカスタマイズできません。

 

【THE THORパーツ10】ボックス内ボックス

 

THE THORのデフォルトで備えられているボックス内ボックスは下記の10種類。10種類のボックス内ボックスを登録できます。ただし、上書きしかできないので、新しくボックス内ボックスを登録すると以前のボックス内ボックスが使えなくなってしまうので、ご注意ください。

 

ターコイズグラデタイトル
アイコンボーダータイトル
ブルーシャドウタイトル
サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス

ボックスは方眼ペーパーボックスを使っています。

 

ラベルカスタマイズ

  1. 表示させたい文字を入力
  2. 文字に網かけをする
  3. 「スタイル」をクリック「デフォルトパーツ」からラベル・ボタン・ボックスから好きなパーツを選んでクリック
  4. 「スタイルのスタイルセット」から装飾を、「スタイルのカラーセット」から色を選んでクリック

    スタイルセット・カラーセットは、複数選択が可能なので好みに合わせて組み合わせてください。

 

ボックス内ボックスの登録
  1. コードをコピー
  2. カスタマイザー
  3. パーツスタイル設定
  4. ボックス内ボックス設定
  5. ボックス内ボックスの設定見出しデザインの設定

タイトルとスタイルを入力してカスタマイザー公開 をクリック

ボックス内ボックス

 

【THE THORパーツ11】共通ボタン

 

THE THORのデフォルトで備えられている共通ボタンは、下記の9種類。背景色と文字色をカスタマイズできます。

 

 

THE THORの共通ボタンはメインビジュアル・フッターCTA・お問い合わせページに備えられています。他にも投稿や固定ページに使うことができます。

 

the thor メインビジュアルメインビジュアル
the thor フッターCTAフッターCTA
お問い合わせお問い合わせページ

 

共通ボタン設定方法
  1. カスタマイザー
  2. パーツスタイル設定
  3. 共通ボタン設定

文字色・背景色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ12】見出し

 

THE THORのデフォルトで備えられている見出しは、下記の53種類。見出しデザインは、文字色・下線・背景色・マークのカスタマイズができます。

 

基本下線ー基本下線ー2本下線ー1本点線下線1本2色下線マーカー下線ー1本矢印下線ーストライプ下線ーグラデ下線センター下線センター矢印左線ー基本左下線ー基本左下線ー下点線左下線ー左2色背景基本背景ー下線背景ー左線背景ー左下線背景ー吹き出し背景吹き出し線付背景ーリボン背景ボックス背景ーステッチ背景ーストライプ背景ー線背景ー点線角丸背景ー括弧背景ーはみ出す線
グラデー基本グラデー角丸グラデーラウンドグラデーシンプルグラデーシンプル角丸グラデーシンプルラウンドグラデー上線グラデー上線角丸グラデー上線文字白グラデー上線角丸文字白ラインマークー基本ラインマークー背景角丸ラインマークー背景線角丸ラインマークーグラデ上線ラインマークーグラデ上線文字白丸マーク基本丸マークー背景角丸丸マークー背景線角丸丸マークグラデ上線文字白先頭大ー基本先頭大ー 先頭下線先頭大ー下線

 

見出し設定
  1. カスタマイザー
  2. パーツスタイル設定
  3. 見出し設定

デザイン・色を指定をしてカスタマイザー公開 をクリックし

 

【THE THORパーツ13】リスト・番号付きリスト

 

THE THORのデフォルトで備えられているリスト・番号付きリストは、下記の16種類。リストデザインは、色・背景・枠のカスタマイズができるようになっています。

 

リスト基本リスト背景リストステッチリストペーパーリスト包含用紙リスト線リスト点線リストはみ出す線
番号付きリスト基本番号付きリスト背景番号付きリストステッチ番号付きリストペーパー番号付きリスト方眼用紙番号付きリスト線番号付きリスト点線番号付きリストはみ出す線

 

リストカスタマイズ
  1. カスタマイザー
  2. パーツスタイル設定
  3. リスト設定

デザイン・色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ14】吹き出し

 

THE THORのデフォルトで備えられている吹き出しは、下記の4種類。吹き出しは、画像・文字色・背景色・線色のカスタマイズができます。

 

初心者さん
Name
左画像(背景スタイル)
初心者さん
Name
左画像(背景スタイル)
初心者さん
Name
左画像(背景スタイル)
初心者さん
Name
左画像(背景スタイル)
吹き出し設定
  1. カスタマイザー
  2. パーツスタイル設定
  3. 吹き出し設定

画像・文字色・背景色・線色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ15】引用デザイン

 

THE THORのデフォルトで備えられている引用デザインは、下記の7種類。引用デザインは、色・デザインをカスタマイズができます。

 

引用基本引用左線引用線引用丸角
引用丸角線引用左背景引用ラベル

 

引用設定
  1. カスタマイザー
  2. パーツスタイル設定
  3. 引用設定

デザイン・色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ16】テーブル

 

THE THORのデフォルトで備えられているテーブルは、下記の1種類。テーブルデザインは、色・枠線のカスタマイズができます。

 

 

テーブル設定
  1. カスタマイザー
  2. パーツスタイル設定
  3. 引用設定

デザイン・色を指定してカスタマイザー公開 をクリック

 

【THE THORパーツ17】SNSシェアボタン

 

THE THORのデフォルトで備えられているSNSシェアボタンは、下記の11種類。SNSシェアボタンは、好きなデザインを選べるようになっています。

 

パターン1パターン1
パターン2パターン2
パターン3パターン3
パターン4パターン4
パターン5パターン5
パターン6パターン6
パターン7パターン7
パターン8パターン8
パターン9パターン9
パターン10パターン10
パターン11パターン11

 

SNSシェアボタン
  1. カスタマイザー
  2. パーツスタイル設定
  3. シェアボタン設定

デザイン・色を指定てカスタマイザー公開 をクリック

 


 

以上、【THE THORパーツカスタマイズ】ボックス・見出し・ボタン・吹き出しなど17種類でした。

 

わからないことがありましたら、いつでもお問い合わせください。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu