あまり広げすぎると、
読者が目をあっちこっちにしないといけなくなるので程々に。
サイドバー幅も合わせて調整しました。
1ページ内コンテンツ全体の幅をまず決める
投稿記事の幅や、サイドバーや余白もいれて、
全体の幅をどれ位にするか、まず決めます。
お好みですが、見やすいと思うのが
1000px～1200pxです。
大体これくらいにして、
あとはサイトのデザインに合わせて増減して下さいね。
元々のStinger5の幅はどうなっているのか、というと。
ページのコンテンツ全体の幅…980px
サイドバー…300px
コンテンツ全体からサイドバーや余白を引いた部分＝記事部分
…660px
となっています。
つまり、指定されているのは全体の幅とサイドバーです。
投稿記事部分の幅の設定はどうするの？というと、
右側からマイナス○○…というように指定します。
ではカスタムします。
WordPress管理画面から、スタイルシートを開きます。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/*media Queries PCサイズ
を検索。
その下に
#wrapper {
padding: 0 40px;
}
がありますね。
これは、PCサイズのコンテンツ全体のCSSコードです。
以下に変更しました。
#wrapper {
padding: 0 40px;
max-width: 1050px;
}
私は幅を1050にしました。
ここは自由に変えてください。
では、私はここから、以下のようにカスタムします。
『投稿コンテンツを狭くして、
サイドバーの幅を広くする』
これを踏まえて、下記をお読み下さい。
実際にカスタムされる場合は、どこを広くするかで、
数字を増減させればOKです。
投稿コンテンツとサイドバー幅を調整する
次に、投稿部分の幅を決めていきます。
投稿コンテンツ+サイドバーを合わせたところから、
どの位置に投稿コンテンツを置くかを設定します。
/*media Queries PCサイズ
の下に、
float: left;
width: 100%;
margin-right: -300px;
}
があります。
説明すると、
#contentInnerという大きな幅（投稿コンテンツ+サイドバーを合わせた部分）の中から、
右にマイナス300しています。
つまり、マイナス300したのが投稿コンテンツ部分になっています。
では、このコードを以下に変更。
#contentInner {
float: left;
width: 100%;
margin-right: -330px;
}
投稿コンテンツ部分の右側に330pxの余白を設けます。
余白を広げました
＝サイドバーに使える部分を広げました。
次に、
main {
margin-right: 320px;
margin-left: 0px;
background-color: #fff;
border-radius: 4px;
padding: 20px 40px;
}
を変更します。
このコードは、
メイン（投稿部分）を指します。
右側から320の位置に置く、という指定の仕方がされています。
以下のように変更。
main {
margin-right: 350px;
margin-left: 0px;
background-color: #fff;
border-radius: 4px;
padding: 20px 40px;
}
350pxにしました。
margin-rightとは、
右側にどれ位余白を入れるか。です。
メイン（投稿部分）コンテンツを置く位置が変わります。
つまり、320の方がコンテンツ部分は広くなり、
350にした事でコンテンツ部分を狭くした訳ですね。
先ほど
#contentInner
を330にしました。
そして、
main
は右に余白350を設けています。
つまり、その差20は、
投稿コンテンツ部分とサイドバーのすき間になります。
では、最後に。
サイドバー部分の幅を設定します。
#side aside {
float: right;
width: 300px;
padding: 0px;
}
を、
#side aside {
float: right;
width: 320px;
padding: 0px;
}
先ほど指定した
#contentInnerは、330。
に収まる範囲で、少し余裕を持たせて320にしました。
以上で、コンテンツ内の幅を変更できました。
あと、ヘッダー画像を使われている方は、
そのサイズも変更してください。
その件についてはこちらのサイトが参考になります。
【STINGER5】メインとサイドバーの幅を変更する方法【初心者向け】
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク