前回、私が普段使用しているボックスを例に、パーツの組み合わせ方を解説しました。
WordPressで人気急上昇のテーマ、「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！
ちなみに、１行目の<div class〜から始まるところは、ボックスについて。
２行目は、タイトルに設定したラベル部分にあたり、「bgc-」は背景・「ftc-」は文字色です。
となると、「VPorange」＝「ベリーペールトーンのオレンジ」、「Borage」＝「ブライトトーンのオレンジ」とわかりますね。
例として、もしベリーペールトーンの配色内で色を変えたければ、「orage」の部分を別の色に書き換えてあげれば良いということです！
そこで、まとめてみると・・・
次に、トーンやカラーを全種類あげてみましたので、お好きな組み合わせを試してみてくださいね！
トーン：7種類
ボックスの背景色を決めるときの、前半部分となります。
今回は、全てのボックスでイエローを用いてトーンの違いを表してみました。
黄色でもトーンが違うだけで、印象ががらりと変わりますよね。
用いたいトーンがあれば、アルファベットの大文字部分をテキストエディタの所定の位置に記入します。
カラー：12種類
組み合わせの後半部分にあたる、カラー12種類です。
今回は、ベリーペールトーンを使用して、カラー12種類を表してみました。
カラーは違えど、ベリーペールトーンの柔らかい印象はそのままなので統一感がありますね。
太字になっているアルファベットの小文字部分を、テキストエディタの所定の位置に記入します。
モノトーン：6種類
モノトーンは、上記のような組み合わせは必要ありません。
アルファベット部分をそのままコピペするだけです！
最後に
今回は、テキストエディタでのパーツの色の変更方法をご紹介しました。
慣れてしまえばこちらの方が作り直すよりも早いですし、テキスト等もその部分を消して書き直せばよいので時短になります！
この記事を書くにあたって、ボックス全てのトーンや色をみましたが、やはり、トーンを合わせたボックスは、統一感があって綺麗なのでオススメです！
THE・THORをお使いの方の少しでも参考になれば嬉しいです〜！
今まで数回、ザ・トールのボックスについてブログを書いてきました。 このテーマのボックスの良いところは、自分でパーツをカスタマイズできたり、色を変更できたりするところです。 しかし、ザ・トー[…]
私はブログ開設して約2ヶ月が経ちます。 ブログをやってみたいなぁという気持ちは以前からあったのですが、如何せん初心者で何も分からない状態。 ブログの始め方や設定方法など、ほとんど知識があり[…]