PR ブログ運営

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

【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が使える人には、こちらもお勧め。

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

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

  • この記事を書いた人
  • 最新記事

HIRO(ひろ)

2016年ブログ開設、ブログ歴8年目。ブログ運営のノウハウを中心に多彩な情報を発信しています。ブラック企業で働きながらコツコツと自分のブログを育てたら人生変わりました。当ブログが少しでもヒントになれば幸いです。

-ブログ運営