アトリエプルーシュ

life

【JIN】記事の幅を狭める方法( WordPressテーマJIN)

JINを購入してから、自分の理想のサイトにしたくて、色々アレンジを加えました。その方法をまとめていきます(*^^*)参考になれば幸いです。

記事の幅を狭くしたい

image 15

PCで見たとき、記事の幅が広すぎる…と感じました。JINは沢山の方が使用されているテーマなので、パッと見て、あ、ブログだ。JINだ。と分かることがあります。

少しアレンジを加えるだけで、JINっぽさがなくなり、オリジナルブログ感を出すことが可能です。本当は、記事の幅を狭く、サイドバーを更に狭くしたかったのですが、方法が分からず…今回は、記事+サイドバーの幅が狭くなるCSSを紹介します。

CSSの編集ページを開く

WordPressのダッシュボード→外観→カスタマイズ→追加CSSを開きます。

CSSを追記

以下のCSSをコピー&ペーストしてください。

/* 記事の幅 */
@media (min-width: 1024px){
#contents {
width: 1100px;
}
}

これを張り付けると、PCで見たときに少しだけ記事の幅が狭くなります。

▼初期設定の幅

image 14

▼CSSを追記した幅

image 13

@media (min-width: 1024px)

これが「画面サイズが1024px以上の時は」というCSSです。ブラウザの幅が狭いのに、記事も狭くなると、見にくいので、1024px以上に設定しました。

width: 1100px;

これが「記事+サイドバーの幅の数値」になります。小さくすると、より幅が狭く、大きくすると広くなりますので、お好みにいじってください。

1カラムの時は?

JINの掲示板にCSSが記載されていました。参考にして下さい(*^^*)

まとめ

以上で記事の幅を狭めることが出来ます。これからもこのサイトで採用したCSSをまとめていきますので、参考にして下さい(*^^*)

※CSSをいじる時は、バックアップを取ってから行う事をおおススメします。