【JINカスタマイズ】見出し付きボックスの色を個別に変える方法【コピペでOK】

Warning: Undefined array key 1 in /home/chau/dressing.works/public_html/wp-content/themes/jin-child/functions.php on line 89

Warning: Undefined array key 1 in /home/chau/dressing.works/public_html/wp-content/themes/jin-child/functions.php on line 89

こんな疑問にお答えします。

WordPressテーマJINではボックスの種類ごとに色を設定できるのですが、カラーバリエーション設定は用意されていないんですよね。1種類につき1色だけです。

うーん、微妙に不便！

ということで、今回はJINの見出し付きボックスの色を変えて、別の見出し付きボックスとして使う方法を解説します。

この記事を読んでいただくと、下記のように色違いのボックスを並べて使うこともできるようになります。

CSSコードをコピペするだけで使えますので、よろしければ記事を書く際にご活用ください！

ボックスごとに色を変える方法

JINの見出し付きボックスは以下の6種類ありますが、黒板以外の5種類について説明します。

なお、基本的な設定方法はどのボックスも同じですので、詳しくは最初の「背景色付きボックス1」の説明をご覧ください。

2つ目以降は貼り付けるコードのみ掲載します。

背景色付きボックス１

こちらの見出し付きボックスの色を

以下のようなブルー系に変更する例をご紹介します。

他の色が良い場合は、最後にカラーコードをお好きな色に書き替えてくださいね。

1. 追加CSSクラスを設定する

ボックスをクリックして選択したら、ブロック＞高度な設定の「追加CSSクラス」に、任意のクラス名を半角英数字で入力します。

クラス名は何でも良いのですが、ボックス名と指定する色を入れておくと、後で見ても分かりやすいのでおすすめです。

ここでは、ボックス１のブルー系にするので「box1-blue」というクラス名を入力します。

追加CSSクラス名

2. 追加CSSにコードを貼り付ける

記事を下書き保存したら、外観＞カスタマイズ＞追加CSSに下記CSSコードを貼り付けて、クラス名（2箇所）とカラーコードを書き換えます。

CSSコード

/* 背景色付きボックス1　色変更 */
.box1-blue > .kaisetsu-box1-title,
.box1-blue > .kaisetsu-box1:before{
	background-color:#87ceeb!important;
}

追加CSS画面

例と同じクラス名、色にする場合は上のCSSコードを貼り付けるだけでOKです。

書き換えたら追加CSSを[公開]してください。

3. 表示を確認する

記事に戻って、ボックスの色が変わっているかプレビューで見てみましょう。
（投稿画面のボックスの色は変わりません）

こんな感じで設定した色のボックスになっていたら、設定完了です。

色を変更した見出し付きボックスを繰り返し使う場合は再利用ボックスに登録するのがおすすめです。

設定方法はこちら

他の４つの見出し付きボックスの色を変える場合も同様に設定を行います。
CSSコードは以下を参照してください。

背景色付きボックス２

このボックスをピンク系、オレンジ系にする追加CSSクラス名とコードです。

ピンク系

完成イメージ

/* 背景色付きボックス2 ピンク */
.box2-pink{
	background-color:#FEF0F1;
}
.box2-pink > .kaisetsu-box5-title{
	background-color:#F98B91!important;
}

オレンジ系

/* 背景色付きボックス2 オレンジ */
.box2-orange{
	background-color:#FFF4EA;
}
.box2-orange > .kaisetsu-box5-title{
	background-color:#F7A354!important;
}

/* 細線ボックス1　色変更 */
.hososen-box1-pink {
    border-color: #FF99A6!important;
}
.hososen-box1-pink > .kaisetsu-box2-title {
    background-color: #FF99A6!important;
}

/* 細線ボックス2　色変更 */
.hososen-box2-green {
    border-color: #008594!important;
}
.hososen-box2-green > .kaisetsu-box4-title {
    background-color: #008594!important;
}

/* 細線背景色付きボックス　色変更 */
.hoso-haikeibox-orange{
	 border-color: #F7A354!important;
}
.hoso-haikeibox-orange > .innerlink-box1-title {
    background-color: #F7A354!important;
    border-color: #F7A354!important;
}
.hoso-haikeibox-orange.innerlink-box1:before{
    background-color: #F7A354!important;
}

まとめ

今回は、JINの見出し付きボックスのカラーバリエーションを増やす方法を解説しました。

最初だけ設定が必要ですが、一度登録してしまえば繰り返し使えますので、ボックスをよく使われる方や記事をわかりやすくしたい場合などに活用いただければと思います。

どうしても設定方法が分からない、代わりに設定して欲しいという時は、Dressingのブログお悩み相談をご利用ください。あなたのご質問にチャットでお答えします。

ブログお悩み相談受付中

Dressingでは、ブログ作成中の疑問やお悩みにチャットを使ってお答えしています。

こんなお悩みありませんか？

• WordPressが思ったより難しくて挫折しそう
• 使い方が分からない、なぜか上手くいかない
• 自分のブログはこのままでいいの？

など、お困りの際はお気軽にご相談ください。

今すぐ解決！

相談してみる