どうもこんにちは、りゅう(@ryuta_blog)です!
今回は、JINに備わっている「ボックススタイル」の横幅を広げるカスタマイズを紹介します。


早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
JINのカスタマイズをする前に
カスタマイズをする前に、なるべくバックアップを取っておいてください。
また、カスタマイズは必ず子テーマから行ってください。(直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます)
子テーマを導入していない方は以下からダウンロードできます。
子テーマについて詳しく知らない方は、まず以下の記事を一読ください。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

【JINカスタマイズ】ボックススタイルの横幅を広げる方法
まずは、WordPress管理画面より、「外観 → テーマの編集」をクリックします。(JIN付属のCSSエディタでもOK)
JINの子テーマが適用されているのを確認し、下記のコードをコピペします。
コピペしましたら、「ファイルを更新」をクリックで完成です。

簡単すぎますね。笑
なお、例では「simple-box5(細点線背景色ボックス)」の横幅を調節してますが、他のボックスを調節する場合は、それぞれ下記のようにコードを書き換えてください。
- 太枠線ボックス ⇒ .simple-box1
- 太点線ボックス ⇒ .simple-box2
- 2重線ボックス ⇒ .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に関する記事はこちら▼



プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか?
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック!