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

どうもこんにちは、りゅう(@ryuta_blog)です!

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

カスタマイズ前

 

カスタマイズ後

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

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

 

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

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

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

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

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

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

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

あわせて読みたい
WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】どうもこんにちは、りゅう(@ryuta_blog)です! WordPressでブログをやっている皆さん! ちゃんと「子テーマ...

 

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

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

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

style.css

@media (min-width: 768px) {
.simple-box5 {
width: 100%;
}
}

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

コピペ

簡単すぎますね。笑

なお、例では「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です。

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%;
}
}

カスタマイズがうまく反映されない場合

カスタマイズがうまく反映されない場合、一度ページのキャッシュを空にしてから、再度ページを更新してみてください。

ブラウザ毎のキャッシュを空にする方法
  • safariの場合:「開発」タブから「ページのキャッシュを空にする」をクリック
  • InternetExplorerの場合:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
  • Chromeの場合:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック

 

まとめ

今回はボックススタイルの横幅を広げる方法を紹介しました。

あくまで個人的なカスタマイズである事と、独学の素人ですので不具合が出ましたら申し訳ありません。

その場合は、子テーマのCSSにコピペした部分を削除すれば、元に戻るかと思います。

最後に、素晴らしいWordPressテーマ「JIN」に感謝しつつ、筆をおきます。

その他JINに関する記事はこちら▼

あわせて読みたい
【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう(@ryuta_blog)です! 今回の記事は、WordPressテーマ「JIN」のカスタマイズをしていき...
あわせて読みたい
WordPressテーマ「JIN(ジン)」のあまり触れられてない魅力を徹底解説!どうもこんにちは、りゅう(@ryuta_blog)です! 先日初めて有料のWordPressテーマを購入しました。 購入した...
ABOUT ME
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です