【JINカスタマイズ】ボックススタイルの横幅を広げる方法【簡単】

どうもこんにちは、りゅう（@ryuta_blog）です！

今回は、JINに備わっている「ボックススタイル」の横幅を広げるカスタマイズを紹介します。

カスタマイズ前

カスタマイズ後

早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。

コピペするだけの簡単な内容ですので、ぜひお試しください！

JINのカスタマイズをする前に
【JINカスタマイズ】ボックススタイルの横幅を広げる方法
- 全てのボックススタイルの横幅を広げる場合
- カスタマイズがうまく反映されない場合
まとめ

JINのカスタマイズをする前に

カスタマイズをする前に、なるべくバックアップを取っておいてください。

また、カスタマイズは必ず子テーマから行ってください。（直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます）

子テーマを導入していない方は以下からダウンロードできます。

>>JIN【子テーマ】のダウンロードページ

子テーマについて詳しく知らない方は、まず以下の記事を一読ください。

⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】WordPressでブログをやっている皆さん！ちゃんと「子テーマ」を利用していますか？「子テーマ？なにそれ？」となった人は、この記事を参考に子テーマについて理解していってください。子テーマを理解しないままテーマをカスタマイズしてしまうと、場合によっては取り返しのつかないことになります。...

【JINカスタマイズ】ボックススタイルの横幅を広げる方法

まずは、WordPress管理画面より、「外観 → テーマの編集」をクリックします。（JIN付属のCSSエディタでもOK）

JINの子テーマが適用されているのを確認し、下記のコードをコピペします。

style.css

@media (min-width: 768px) {

.simple-box5 {

width: 100%;

}

コピペしましたら、「ファイルを更新」をクリックで完成です。

コピペ

簡単すぎますね。笑

なお、例では「simple-box5（細点線背景色ボックス）」の横幅を調節してますが、他のボックスを調節する場合は、それぞれ下記のようにコードを書き換えてください。

太枠線ボックス ⇒ .simple-box1
太点線ボックス ⇒ .simple-box2
２重線ボックス ⇒ .simple-box3
細枠背景色ボックス ⇒ .simple-box4
細点線背景色ボックス ⇒ .simple-box5
背景色ボックス ⇒ .simple-box6
太枠背景色ボックス ⇒ .simple-box7
左線ボックス ⇒ .simple-box8
端折れボックス ⇒ .simple-box9
タイトル付きボックス ⇒ .kaisetsu-box1
枠ありタイトル付きボックス ⇒ .kaisetsu-box2
黒板ボックス ⇒ .kaisetsu-box3
タブ付きボックス ⇒ .kaisetsu-box4
小さいタイトル付きボックス ⇒ .kaisetsu-box5
ポイントボックス ⇒ .concept-box1
注意点ボックス ⇒ .concept-box2
良い例ボックス ⇒ .concept-box3
悪い例ボックス ⇒ .concept-box4
参考ボックス ⇒ .concept-box5
メモボックス ⇒ .concept-box6
合わせて読みたいボックス ⇒ .innerlink-box1

また、今後のアップデートで、横幅の調節機能が追加されましたら、コピペしたCSSを消せばOKです。

全てのボックススタイルの横幅を広げる場合

全てのボックススタイルの横幅を広げる場合は、下記のコードをコピペでOKです。

style.css

@media (min-width: 768px) {
.simple-box1,
.simple-box2,
.simple-box3,
.simple-box4,
.simple-box5,
.simple-box6,
.simple-box7,
.simple-box8,
.simple-box9,
.kaisetsu-box1,
.kaisetsu-box2,
.kaisetsu-box3,
.kaisetsu-box4,
.kaisetsu-box5,
.kaisetsu-box6,
.concept-box1,
.concept-box2,
.concept-box3,
.concept-box4,
.concept-box5,
.concept-box6,
.innerlink-box1 {
width: 100%;
}
}