THE THORでパーツスタイルを好みのデザインにカスタマイズする方法

THE THORには、パーツスタイルと言い、予め設定されたスタイルが用意されています。

デフォルトの設定で使用することも勿論いいのですが、ブログのデザインによっては、色合いが違ったりサイズやアイコンを別のものに変えたい場合もあります。

そこで、【THE THOR(ザ・トール)】のパーツスタイルを自分好みにカスタマイズする方法をご紹介します。

THE THORのパーツスタイルとは

THE THORで準備されているパーツスタイルとは、マーカーやラベル、ボタン、ボックスなどがワンクリックで設定できるようになっています。

パーツスタイルの設定画面

以下は、投稿画面のイメージ画像です。このように数多くのスタイルが予め設定されています。

ブログを書くときは、以下の画面でクリックするだけでスタイルを装飾できます。

THE THORのパーツスタイル

パーツスタイルのサンプル

サンプルは一部になりますが、以下のような装飾ができます。

今回は、このボタンやラベルの色やサイズ、角の丸みなどを変更する方法を紹介する記事になります。

THE THORのパーツスタイル

 

パーツスタイルの属性を理解する

パーツスタイルをカスタマイズするには、一定の規則(属性)を理解する必要があります。

属性には、4つの種類があり、それぞれを組み合わせてラベルやボタンを作っていきます。

パーツタイプ

まず1つ目がパーツタイプで「ラベル」「ボタン」「ボックス」などの大分類になります。

パーツタイプは「ep」から始まり、4種類のパーツタイプがあります。

  • ep-label  ラベル
  • ep-btn  ボタン
  • ep-box  ボックス
  • ep-inbox  ボックス内ボックス

パーツカラー

次は「背景色」「文字色」「枠線の色」のパーツのカラーを設定します。

  • bgc-○○  背景色
  • ftc-○○  文字色
  • brc-○○  枠線色

○○にはカラーコードが入り、カラーコードの全91色は以下の記事で紹介しています。

参考 THE THORのパーツスタイルのカラーコード一覧-カスタマイズ用

アイコン

予め用意されているアイコンのコードを入力することでアイコンを表示することができます。

記述方法は、以下の通りです。

  • icon-○○  アイコン

 

アイコンのコードを見るには

記事を書く編集画面からいきます。

ダッシュボード  投稿  新規追加

新規追加で編集画面にいくと、上の方のTHE THORのアイコンオプションをクリックして一覧を見てください。

アイコンの一覧の一部を紹介します。全てをご覧になりたい場合は「アイコンオプション」をクリックして確認してください。

以下の一覧を見て「icon-○○」の○○に以下のコードを入力します。

THE THORのアイコン一覧

 

その他のカスタマイズコード

その他のカスタマイズには「es」コードを使います。

ラベルの場合だと、外枠の余白や内側の余白、枠線の幅などを設定するコードです。

記述方法は、以下になります。

  • es-○○  属性コード

 

 罫線の変更

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

上記のラベルのコードは以下になります。
ep-label es-borderDashedS brc-VDgray bgc-VLgray es-RpaddingSS es-LpaddingSS

ピンクの部分を以下のコードで変更できます。

囲み枠

サンプル コード 説明
サンプルラベル es-borderSolidS 細実線
サンプルラベル es-borderSolidM 太実践
サンプルラベル es-borderDashedS 細波線
サンプルラベル es-borderDashedM 太波線
サンプルラベル es-borderDottedS 細点線
サンプルラベル es-borderDottedM 太点線

下線

サンプル コード 説明
サンプルラベル es-BborderSolidS 細実線
サンプルラベル es-BborderSolidM 太実践
サンプルラベル es-BborderDashedS 細波線
サンプルラベル es-BborderDashedM 太波線
サンプルラベル es-BborderDottedS 細点線
サンプルラベル es-BborderDottedM 太点線

左線

サンプル コード 説明
サンプルラベル es-LborderSolidS 細実線
サンプルラベル es-LborderSolidM 太実践
サンプルラベル es-LborderDashedS 細波線
サンプルラベル es-LborderDashedM 太波線
サンプルラベル es-LborderDottedS 細点線
サンプルラベル es-LborderDottedM 太点線

 

 角を丸める変更

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

上記のラベルのコードは以下になります。
ep-label es-round es-borderDashedS brc-VDgray bgc-VLgray es-RpaddingSS es-LpaddingSS

ピンクの部分を以下のコードで変更できます。

サンプル コード 説明
サンプルラベル es-radius 5px 角を丸める
サンプルラベル es-radiusL 10px 角を丸める
サンプルラベル es-round 50px 角を丸める
 サンプルラベル es-LroundL 50px 左の角を丸める
サンプルラベル  es-LroundR 50px 右の角を丸める

 

参考 THE THORのリストアイコンにFont Awesome 5のアイコンを使う方法

パーツスタイルのカスタマイズ方法

それでは、カスタマイズする方法を紹介します。

パーツスタイルをカスタマイズするには、管理画面にいきます。

パーツスタイルの設定

WordPressの管理画面より

ダッシュボード  外観  カスタマイズ  パーツスタイル設定[THE]

THE THORのパーツスタイル設定

 

実際のカスタマイズ例

実際のカスタマイズ例で紹介していきます。

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

 デフォルトサンプル
THE THORのパーツスタイル例

 カスタマイズサンプル
THE THORのパーツスタイルサンプル

 記述例
(従来)ep-label es-round es-borderDashedS brc-Lblue bgc-VPblue es-RpaddingSS es-LpaddingSS
(変更)ep-label es-round es-borderDashedS brc-Lgray bgc-VLgray es-RpaddingSS es-LpaddingSS

『brc(枠線色)』と『bgc(背景色)』を変更しています。

カラーコード一覧をご覧になる場合は、以下の記事を参考にしてください。

全91色のカラーコード一覧表です。

参考 THE THORのパーツスタイルのカラーコード一覧-カスタマイズ用

 

 手順1:ラベル設定を行う

パーツスタイル設定[THE]からラベル設定へいきます。

THE THORのパーツスタイル設定

 

 手順2:変更したいラベルを選ぶ

ラベルのスタイルが10個用意されていますので、変更したいラベルの「スタイル」をカスタマイズしていきます。

今回は「ブルーボーダーラウンドラベル」を変更しますので「ラベル4の設定」を変更します。

THE THORのパーツスタイル設定

 

 手順3:スタイルをカスタマイズする

上の記述例にある通り「スタイル」を上書きしていきます。

ep-label es-round es-borderDashedS brc-Lgray bgc-VLgray es-RpaddingSS es-LpaddingSS

このコードを「スタイル」欄に記載してください。

書き換えるとグレーの背景にグレーの枠線でラベルが装飾されます。

このように、変更したい(カスタマイズ)パーツスタイルの記述を変更していきます。

 

ここで紹介した内容はYouTubeでもご覧いただけます。

まとめ

【THE THOR(ザ・トール)】は、デフォルトで色々な装飾が準備されていますが、それを独自にカスタマイズできるところも素晴らしいテーマです。

これからもTHE THORのカスタマイズ方法を紹介していきます。

THE THORでパーツスタイルを好みのデザインにカスタマイズする方法
フォローお願いします