カスタマイズ

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

ブログ初心者

JINで同じボックスを2つ並べて使いたいんですが、片方だけ色を変える方法ってありますか?

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

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

うーん、微妙に不便!

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

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

見出し付きボックス

グリーン

見出し付きボックス

ピンク

見出し付きボックス

オレンジ

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

この記事のレベル

難易度:

CSSを扱うので中級者向けです。

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

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

背景色付きボックス1

背景色付きボックス1

細線ボックス1

細線ボックス1

背景色付きボックス2

背景色付きボックス2

細線ボックス2

細線ボックス2

黒板ボックス

黒板ボックス

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

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

見出し付きボックスの色を一括で変更する方法はこちら

背景色付きボックス1

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

背景色付きボックス1

背景色付きボックス1

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

背景色付きボックス1-ブルー系

ブルー系

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

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

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

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

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

追加CSSクラス名

  • box1-blue

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

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

CSSコード

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

追加CSS画面

  • 上記の「box1-blue」の部分は1で指定したクラス名に置き換えてください
  • カラーコード(#87ceebの部分)はお好きなカラーコードを設定してください
  • 「.(ドット)」や「!」などを消さないように注意してください
  • カラーコードはこちらを参考にしてください。

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

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

3. 表示を確認する

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

背景色付きボックス1-ブルー系

ブルー系

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

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

設定方法はこちら

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

背景色付きボックス2

背景色付きボックス2

背景色付きボックス2

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

ピンク系

完成イメージ

背景色付きボックス2

ピンク

追加CSSクラス名

  • box2-pink

CSSコード

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

オレンジ系

背景色付きボックス2

オレンジ

追加CSSクラス名

  • box2-orange

CSSコード

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

細線ボックス1

細線ボックス1

細線ボックス1

完成イメージ

細線ボックス1

ピンク系

追加CSSクラス名

  • hososen-box1-pink

CSSコード

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

細線ボックス2

細線ボックス2

細線ボックス2

完成イメージ

細線ボックス2

グリーン系

追加CSSクラス名

  • hososen-box2-green

CSSコード

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

細線背景色付きボックス

完成イメージ

追加CSSクラス名

  • hoso-haikeibox-orange

CSSコード

/* 細線背景色付きボックス 色変更 */
.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が思ったより難しくて挫折しそう
  • 使い方が分からない、なぜか上手くいかない
  • 自分のブログはこのままでいいの?

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

今すぐ解決!