【JIN CARATカスタマイズ】テキストボックスの横幅を広げる方法(コピペでOK)

このページではワードプレスの人気テーマ「Jin」の専用プラグインである「CARAT」のテキストボックスに関するカスタマイズ記事です。

CARATのボックスは下の写真のように横いっぱいに伸びておらず、少し幅がありますね。

今回はこのボックスの幅を横いっぱいに広げるカスタマイズ方法です。

ちなみに、当サイトでは「Diver」という別のテーマを使っています。

実際の画面を見たい方は、私の運営している別サイト「ハロハロNET」を参考にしてください。こちらではJinを使用しています。

【CARAT】ボックススタイルの横幅を広げる方法

まず、Wordpressにログインしたら、メニューの「外観」から「カスタマイズ」をクリックしてください。

すると、カスタマイズ画面が開きますので、この中の「追加CSS」を開きます。

追加CSSを開いたら、以下のコードを貼り付けて保存してください。

@media (min-width: 768px) {
.cat_box01,
.cat_maru01,
.cat_icon01,
.cat_dot01,
.cat_stripe01,
.cat_stitch01,
.cat_fusen01,
.cat_fusen02{
width: 100%;
}
}

以上で、完了です。

カスタマイズが終わったら、きちんと反映されているか確認しましょう。

ちなみに、先ほどのコードについて少しだけ補足しておくと、各コードの名前とボックス名は次のように対応しています。

そのため、例えば「シンプルボックスその１」だけ横幅を長くしたいということであれば、次のように書くことができます。

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

最後に

今回はJinの専用プラグイン「CARAT」のテキストボックスの横幅を広げる方法を紹介しました。

Jinのテキストボックスの横幅を長くしたいという人は以下の記事が参考になります。

今回のカスタマイズも以下の記事を参考に作りました。