JINを購入してから、自分の理想のサイトにしたくて、色々アレンジを加えました。その方法をまとめていきます(*^^*)参考になれば幸いです。
記事の幅を狭くしたい
PCで見たとき、記事の幅が広すぎる…と感じました。JINは沢山の方が使用されているテーマなので、パッと見て、あ、ブログだ。JINだ。と分かることがあります。
少しアレンジを加えるだけで、JINっぽさがなくなり、オリジナルブログ感を出すことが可能です。本当は、記事の幅を狭く、サイドバーを更に狭くしたかったのですが、方法が分からず…今回は、記事+サイドバーの幅が狭くなるCSSを紹介します。
CSSの編集ページを開く
WordPressのダッシュボード→外観→カスタマイズ→追加CSSを開きます。
CSSを追記
以下のCSSをコピー&ペーストしてください。
/* 記事の幅 */
@media (min-width: 1024px){
#contents {
width: 1100px;
}
}
これを張り付けると、PCで見たときに少しだけ記事の幅が狭くなります。
▼初期設定の幅
▼CSSを追記した幅
@media (min-width: 1024px)
これが「画面サイズが1024px以上の時は」というCSSです。ブラウザの幅が狭いのに、記事も狭くなると、見にくいので、1024px以上に設定しました。
width: 1100px;
これが「記事+サイドバーの幅の数値」になります。小さくすると、より幅が狭く、大きくすると広くなりますので、お好みにいじってください。
1カラムの時は?
JINの掲示板にCSSが記載されていました。参考にして下さい(*^^*)
まとめ
以上で記事の幅を狭めることが出来ます。これからもこのサイトで採用したCSSをまとめていきますので、参考にして下さい(*^^*)
※CSSをいじる時は、バックアップを取ってから行う事をおおススメします。