三上つかさの雑談ブログ

新しいニュースから生活お役立ち情報、茶道、ブログなど雑多な話。

【簡単3分】Stinger6でPC記事の幅を変える方法

  公開日:2016年2月9日

stinger6

Stinger6でPCの記事を変える方法をご説明します。
難しい事は考えずに、さくっと3分で変えてみましょう。初心者向けにつくっていますので、説明もそんな感じで。

慣れている人向けにさくっと説明すると、
『#wrapperを大きくする』だけです。下の画像を見て変更する場所を確認したら、もうこのページに留まる必要はないかと思います。それ以上の情報はありません。

なお、この記事は趣深い.comさんを参考にして作成しています。

また、テーマをいじるので、バックアップをとるなどして万が一に備えておいた方が賢明だと思います。

 

さてそれでは、やっていきましょう。

スポンサーリンク


幅を変える。

手順1、CSSをいじる です。手順なんて言っていますが、これだけです。

以下に表示されている場所の数字を、大きくすれば幅は広がり、小さくすれば記事の幅は狭くなります。
「レイアウト スマートフォン」とありますが、PCの記事の幅を変更できます。

stinger6-width

さすがに見づらいと思うので、文字で説明していきますね。

外観の「テーマの編集」から、テーマをいじる画面に移動します。
最初から『スタイルシート (style.css)』の変更が選択されているので、上の画像で示している通りの場所を見つけて大きさを変更します。文字列を抜き出すと、下のようになります。

ここの、赤い文字の部分の数字を変更しましょう。
※スクロールして場所を探してもよいですが、「Ctrl」キーと「F」キーを同時押しで検索するのが早くて便利です。「レイアウト」と検索すれば1つだけヒットします。

例:1000→1100(大きくしすぎないように!)


/*レイアウト スマートフォン
—————————————————-*/
#wrapper {
max-width: 1000px;
padding: 0px;
margin: 0 auto;
}


 

「スマートフォン」と書いてありますが、ちゃんとPCに反映されます。

記事幅の仕組み

今回変更した『#wrapper』は、記事の幅ではなくページ全体の幅を示しています。

ページ全体の幅は、記事幅+余白+サイドバー というようになっています。

この中で、記事幅のみが変動的になっています。余白、サイドバーの幅は固定されているので、ページ全体の幅が広くなれば、記事幅も大きくなるという仕組みです。

 

おわりに

CSSを変更したのに変更が反映されない!!

なんてことがあったら、キャッシュを消してみてください。

キャッシュが残っていると、前のCSSの情報が記憶されていて、それを利用されている可能性があります。

キャッシュを消して更新すれば変更が反映されると思いますので、試してみてください。

 

スポンサーリンク