どうもこんにちは、りゅう（@ryuta_blog）です！
今回は、JINに備わっている「ボックススタイル」の横幅を広げるカスタマイズを紹介します。
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
JINのカスタマイズをする前に
カスタマイズをする前に、なるべくバックアップを取っておいてください。
また、カスタマイズは必ず子テーマから行ってください。（直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます）
子テーマを導入していない方は以下からダウンロードできます。
子テーマについて詳しく知らない方は、まず以下の記事を一読ください。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】
【JINカスタマイズ】ボックススタイルの横幅を広げる方法
まずは、WordPress管理画面より、「外観 → テーマの編集」をクリックします。（JIN付属のCSSエディタでもOK）
JINの子テーマが適用されているのを確認し、下記のコードをコピペします。
コピペしましたら、「ファイルを更新」をクリックで完成です。
簡単すぎますね。笑
なお、例では「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です。
@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%;
}
}
カスタマイズがうまく反映されない場合
カスタマイズがうまく反映されない場合、一度ページのキャッシュを空にしてから、再度ページを更新してみてください。
- safariの場合：「開発」タブから「ページのキャッシュを空にする」をクリック
- InternetExplorerの場合：「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
- Chromeの場合：ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック
まとめ
今回はボックススタイルの横幅を広げる方法を紹介しました。
あくまで個人的なカスタマイズである事と、独学の素人ですので不具合が出ましたら申し訳ありません。
その場合は、子テーマのCSSにコピペした部分を削除すれば、元に戻るかと思います。
最後に、素晴らしいWordPressテーマ「JIN」に感謝しつつ、筆をおきます。
その他JINに関する記事はこちら▼
[…] 【JINカスタマイズ】ボックススタイルの横幅を広げる方法【簡単】 […]