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が使える人には、こちらもお勧め。
と言っても、コピペするだけです。
プロがコーディングしたものを、無料で使わせて頂けるので、めちゃめちゃ有難いですよね。
デザインには終わりがないです。
見た目ばかり気にしてもしょうがないですが、自分が納得できるブログで、楽しく続けられたらいいですね。
