Webデザイン・SEO

【JINカスタマイズ】記事幅を追加CSSで自由に調整する方法

脱社畜ブロガーひろ
ブログで脱社畜したひろです。JINの記事幅を追加CSSで自由にカスタマイズ。左右の余白を少し空けることで設定しましょう。

 

WPテーマ「JIN」
今回は、記事幅をカスタマイズする方法をご紹介します。
CSSを追加して、数値を微調整すれば、自分の自由に設定できますよ。

 

JINはわりと幅広ですよね。
デフォルトからすると、僕もかなり色々と修正中です。JINユーザーは、比較的カスタマイズしたい人が多い気がします。

 

PCと同時にスマホ表示も重要ですね。
CSSで両方を自在に調整しましょう。

 

注意

CSSをコピペ追加するだけで簡単にカスタマイズできます。カスタマイズするユーザーはご承知済みだと思いますが、バックアップなど、導入は自己責任でお願いします。

 

今回は2パターンご紹介します。
どちらのCSSが使いやすいか、お好みでどうぞ。

 

CSSを追加してカスタマイズしよう

①記事の幅を変更する方法

CSSの追加は簡単です。
外観→カスタマイズ→追加CSS、です。
これは分かりますよね。

 

最初は記事幅そのものを変えるCSSです。

 

 幅そのものを縮小するCSS
.cps-post {
width: 95.5%;
margin: 0 auto;
}

 

width、というのが幅です。
なので 95.5%の数字を調整します。
お好みで90%から98%くらいまで。

 

記事幅そのものを縮小するので、わりと大胆な方法だと思います。なのであまりやり過ぎると、狭くなりすぎて、逆に読みづらくなりますよ。

 

注意点が1つだけ。
記事幅そのものが狭くなるので、本文だけでなく「見出し」も一緒に狭まります。そこはお好みで調整して下さい。

 

スマホも同時に変わります。
何度も確認しながら、微調整することをお勧めします。

 

②より詳細に微調整する方法

次はより細かな調整です。
PCとスマホを分けて変更します。

 

 それぞれ微調整するCSS
***Article width***/
/**PC用**/
@media (min-width: 780px) {
.cps-post-main p {
padding-left: 1.8em;/*左余白*/
padding-right: 1.8em;/*右余白*/
}
}
/**スマホ用**/
@media (max-width: 480px) {
.cps-post-main p {
padding-left: 0.5em;/*左余白*/
padding-right: 0.5em;/*右余白*/
}
}

 

padding-の数字を変えて下さい。
左余白と右余白は、同じ数字がお勧めです。
均等に余白ができますので。

 

これは本文のみの余白です。
「見出し」には影響しないので、①か②か、どちらかお好みの方で微調整してみて下さい。

 

JINのカスタマイズはまだまだある

追加のデザインがたくさん!

WPのカスタマイズは楽しいですね。
JINは特に色んなことができます。
CSSが使える人には、こちらもお勧め。

 

 

と言っても、コピペするだけです。
プロがコーディングしたものを、無料で使わせて頂けるので、めちゃめちゃ有難いですよね。

 

デザインには終わりがないです。
見た目ばかり気にしてもしょうがないですが、自分が納得できるブログで、楽しく続けられたらいいですね。

 

こちらもCHECK

WordPressテーマJINのコピペで使えるCSSカスタマイズが最高な件

続きを見る

-Webデザイン・SEO

© 2020 元ブラック社畜hiroのブログ