【簡単3分】Stinger6でPC記事の幅を変える方法
Stinger6でPCの記事の幅を変える方法をご説明します。
難しい事は考えずに、さくっと3分で変えてみましょう。初心者向けにつくっていますので、説明もそんな感じで。
慣れている人向けにさくっと説明すると、
『#wrapperを大きくする』だけです。下の画像を見て変更する場所を確認したら、もうこのページに留まる必要はないかと思います。それ以上の情報はありません。
なお、この記事は趣深い.comさんを参考にして作成しています。
また、テーマをいじるので、バックアップをとるなどして万が一に備えておいた方が賢明だと思います。
さてそれでは、やっていきましょう。
幅を変える。
手順１、CSSをいじる です。手順なんて言っていますが、これだけです。
以下に表示されている場所の数字を、大きくすれば幅は広がり、小さくすれば記事の幅は狭くなります。
「レイアウト スマートフォン」とありますが、ＰＣの記事の幅を変更できます。
さすがに見づらいと思うので、文字で説明していきますね。
外観の「テーマの編集」から、テーマをいじる画面に移動します。
最初から『スタイルシート (style.css)』の変更が選択されているので、上の画像で示している通りの場所を見つけて大きさを変更します。文字列を抜き出すと、下のようになります。
ここの、赤い文字の部分の数字を変更しましょう。
※スクロールして場所を探してもよいですが、「Ctrl」キーと「F」キーを同時押しで検索するのが早くて便利です。「レイアウト」と検索すれば１つだけヒットします。
例：1000→1100(大きくしすぎないように!)
/*レイアウト スマートフォン
—————————————————-*/
#wrapper {
max-width: 1000px;
padding: 0px;
margin: 0 auto;
}
「スマートフォン」と書いてありますが、ちゃんとＰＣに反映されます。
記事幅の仕組み
今回変更した『#wrapper』は、記事の幅ではなくページ全体の幅を示しています。
ページ全体の幅は、記事幅+余白+サイドバー というようになっています。
この中で、記事幅のみが変動的になっています。余白、サイドバーの幅は固定されているので、ページ全体の幅が広くなれば、記事幅も大きくなるという仕組みです。
おわりに
CSSを変更したのに変更が反映されない！！
なんてことがあったら、キャッシュを消してみてください。
キャッシュが残っていると、前のCSSの情報が記憶されていて、それを利用されている可能性があります。
キャッシュを消して更新すれば変更が反映されると思いますので、試してみてください。