THE THORのサブタイトルボーダーボックスの色を変更したいのに、検索でもいまいち希望の物にヒットしない皆さんにもそう思ってもらえるはず。
【THE THORの初期設定】
【変更後】
ポイントは一度設定すれば、次回からは【変更後】のものが作成されます。
ただ、こんな単純なことができるようになる記事にヒットしない。。。
サブタイトルボーダーボックスの出し方
もしかするとサブタイトルボーダーボックスの出し方が分からない方もいるかと思うので、最初に解説をしておきます。
ブロックエディタの場合、クラシックを選択
スタイル⇒ボックス⇒サブタイトルボーダーボックス
この作業で、以下の様なボックスがでてきます。
ただ、濃い赤って、ちょっと使いづらいですよね。
そこで、『色を変えたい!!』
そう思いました。
しかも、
『この作業だけで出したい!!
毎回色の設定とかしたくない!!』
そう思いました。
できました。
次からはそのやり方を紹介します。
サブタイトルボーダーボックスの色を決めよう
ここでのポイントは、もし全ての色を統一しようと思った場合、THE THORのボックスで使える91色のカラーから選択することです。
カラー一覧は、『おじさん』が以下の記事で見やすく作成されてます。
使いたい色は決めましたか？
こんな感じででてくるので、『カラーコード』と『THORのコード』を覚えておきましょう。
サブタイトル部分の色を変更
まずは、サブタイトル部分からの変更していきましょう。
『外観⇒カスタマイズ⇒パーツスタイル設定⇒その他エディタ用パーツ設定』
と進みます。
そうすると以下の部分がでてきます。
この部分を変更することで、サブタイトルの赤く塗りつぶされていた部分が変更できます。
このとき必要なのは、先程覚えておいた『カラーコード』です。
ボーダーラインの色を変えよう
次に、以下の部分に当たるボーダーラインの色を変更します。
『外観⇒カスタマイズ⇒パーツスタイル設定⇒ボックス設定』
と進みます。
デフォルトでは、ボックス１がサブタイトルボーダーボックスになっていて、その下にスタイルが記載されています。
このスタイルの中の『brc-Lblue』がボーダーラインの色を決めている部分です。
私は、THORのカラーコードを『Lblue』にしていますが、この部分を先程記憶しておいたTHORのコードを入力すると、ボーダーラインの色が変わります。
背景色も付けたかったら、『bgc-』に続く部分を変更するといいですね。
ボーダーラインの太さを変更したいときは『es-borderSolidS』の最後の『S』を『M』に変更すると太くなります。
まとめ
今回、今まで使いたいけど色の変更の仕方が分からなかった『サブタイトルボーダーボックス』がやっと使えるようになりました。
是非、皆さんも試して自分のブログのデザインに合った『サブタイトルボーダーボックス』を作ってみて下さいね！
当然ですが、私は、
【THE THOR（ザ・トール）】という有料テーマを利用しております。
他にもTHE THORのデザインで困った所を解決した記事を書いているので参考にして下さい。