JINのテーマを使用しいて、ボックスの枠を記事の幅にそろえたいときに使えます。
- JINのボックスの横幅を広げ、記事の幅に合わせることができるようになる
- コードを紹介しています。コードのコピー＆ペーストでできます
貼り付ける場所
JINでCSSのカスタマイズする方法は2つあります。
- JINテーマのカスタマイズの追加CSSへの追加
- JIN子テーマのstyle.cssへの追加
JINテーマのカスタマイズの追加CSSへの追加
WordPress管理画面で、「外観」⇒「カスタマイズ」⇒「追加CSS」を開いて追加します。追加したら、「公開」をクリックすると表示されます。
>JIN子テーマのstyle.cssへの追加
WordPress管理画面で、「外観」⇒「テーマエディター」⇒「テーマファイル」⇒「スタイルシート（style.css）を開いて追加します。追加したら、「ファイルを更新」をクリックすると表示されます。
本題：ボックスの横幅を広げたい
例として、太枠線ボックス(simple-box1）の横幅を広げるコードは以下の通りです。使用するときは、コードは以下のとおりです。
このコードをコピーして、貼り付けてください。
@media (min-width: 768px) {
.simple-box1 {
width: 100%;
}
}
他のボックスの横幅を広げたい場合は、下記の表を参考にして、
“simple-box1″のところを変更するとできます。
コピペだけです簡単です。
| ボックス名 | class名 |
|---|---|
| 太枠線ボックス | 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 |
【おすすめ】全部のボックスの幅を広げたい
ボックスごとに、設定するのがめんどくさいと思ったら、下記のコードをコピー＆ペーストして使ってください。
私は、このコードを貼り付けています。
@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%;
}
}
