お出かけ大好き!地域のことやグルメなど、何でもアリなレポ記事メインの雑記ブログです!

【THE・THOR】テキストエディタでパーツの色を変更する方法!【トーン・カラー集】

前回、私が普段使用しているボックスを例に、パーツの組み合わせ方を解説しました。

 

関連記事

WordPressで人気急上昇のテーマ、「THE・THOR(ザ・トール)」では、ラベルやボタン、ボックス等を組み合わせてオリジナルのパーツを作ることができます。   もちろん、デフォルトで入っているものもありますが、せ[…]

ザ・トール-ボックスの作り方

 

今回は、前回同様ラベルとボックスを組み合わせたパーツを例に、テキストエディタで簡単に色を変更する方法をご紹介します!

 

とん
わざわざ新たに違う色のボックスを作って保存する手間が省けますし、直す部分はそこまで多くないので簡単!

 

【簡単】ボックス・ラベルの色を変更する方法!

 

タイトル

コメントが入ります!

 

下記は、テキストエディタで見た↑のオレンジボックスです。

 

そのままボックスやラベルを挿入すると一列で表示され、下記のような段落はありません。

 

私は、改行を綺麗に行うために、あえてこのような空白を一文一文の間に入れています。

 

改行について、詳しくはこちらの関連記事をご覧ください!

 

関連記事

今まで数回、ザ・トールのボックスについてブログを書いてきました。   このテーマのボックスの良いところは、自分でパーツをカスタマイズできたり、色を変更できたりするところです。   しかし、ザ・トー[…]

THE・THOR-改行

 

<div class=”ep-box bgc-VPorange“>

<span class=”ep-label bgc-Borange ftc-white es-Fbig es-bold es-LiconBorder icon-pencil2″>タイトル</span>

コメントが入ります!

</div>

 

本題に戻りますが、ボックスやラベル等の色だけ変えたい!という方は、上記のテキストの赤色の太線で書いた部分を変えてあげるだけでOK!

 

ちなみに、1行目の<div class〜から始まるところは、ボックスについて。

 

2行目は、タイトルに設定したラベル部分にあたり、「bgc-」は背景・「ftc-」は文字色です。

 

となると、「VPorange」=「ベリーペールトーンのオレンジ」「Borage」=「ブライトトーンのオレンジ」とわかりますね。

 

例として、もしベリーペールトーンの配色内で色を変えたければ、「orage」の部分を別の色に書き換えてあげれば良いということです!

 

そこで、まとめてみると・・・

 

大文字(トーン)と小文字(カラー)の組み合わせでカラースタイルを好きなように変更することができます。
ftc=文字色bgc=背景色brc=ボーダー色となっているので、その部分は適宜カラー変更可能です。

 

次に、トーンやカラーを全種類あげてみましたので、お好きな組み合わせを試してみてくださいね!

 



 

トーン:7種類

 

ボックスの背景色を決めるときの、前半部分となります。

 

今回は、全てのボックスでイエローを用いてトーンの違いを表してみました。

 

黄色でもトーンが違うだけで、印象ががらりと変わりますよね。

 

用いたいトーンがあれば、アルファベットの大文字部分をテキストエディタの所定の位置に記入します。

 

ヴィヴィッドトーン : V

 

ブライトトーン : B

 

ディープトーン : DP

 

ライトトーン : L

 

ダルトーン : DL

 

ベリーペールトーン : VP

 

ダークグレイッシュトーン : DG

 

カラー:12種類

 

組み合わせの後半部分にあたる、カラー12種類です。

 

今回は、ベリーペールトーンを使用して、カラー12種類を表してみました。

 

カラーは違えど、ベリーペールトーンの柔らかい印象はそのままなので統一感がありますね。

 

太字になっているアルファベットの小文字部分を、テキストエディタの所定の位置に記入します。

 

<ベリーペールトーン> イエロー : VPyellow

 

<ベリーペールトーン> オレンジ : VPorange

 

<ベリーペールトーン> レッド : VPred

 

<ベリーペールトーン> マゼンタ : VPmagenta

 

<ベリーペールトーン> ピンク : VPpink

 

<ベリーペールトーン> パープル : VPpurple

 

<ベリーペールトーン> ネイビー : VPnavy

 

<ベリーペールトーン> ブルー : VPblue

 

<ベリーペールトーン> スカイ : VPsky

 

<ベリーペールトーン> ターコイズ : VPturquoise

 

<ベリーペールトーン> グリーン : VPgreen

 

<ベリーペールトーン> ライム : VPlime

 

モノトーン:6種類

 

モノトーンは、上記のような組み合わせは必要ありません。

 

アルファベット部分をそのままコピペするだけです!

 

ベリーライトグレー : VLgray

 

ホワイト : white

 

ライトグレー : Lgray

 

グレー : gray

 

ダークグレー : Dgray

 

ブラック : black

 

最後に

 

今回は、テキストエディタでのパーツの色の変更方法をご紹介しました。

 

慣れてしまえばこちらの方が作り直すよりも早いですし、テキスト等もその部分を消して書き直せばよいので時短になります!

 

この記事を書くにあたって、ボックス全てのトーンや色をみましたが、やはり、トーンを合わせたボックスは、統一感があって綺麗なのでオススメです!

 

THE・THORをお使いの方の少しでも参考になれば嬉しいです〜!

 

記事はいかがでしたか?

こちらには、記事を読んでくださった方にオススメな広告が表示されます。

<スポンサーリンク>




ザ・トール-パーツの色変更
☆とんの日常はこちらから☆