TOP

サイト幅を変えると、記事、サイドメニュー、ヘッダーの幅も調整必要

シリウスレスポンシブのテンプレートで指定されているデフォルトのサイト幅は、

 

構成事情によりともなう好みのサイズにCSSを書き換えて変更が可能ですが

 

サイト幅を拡張すれば、記事幅、サイドメニュー、ヘッダーの幅も合わせ変更しなければ
なりません

 

 

シリウスのノンレスポンス、デフォルトテンプレートであれば操作画面で調整できるのですが

 

レスポンシブのテンプレートは自動調整の操作はできないため、記事、サイドメニュー
その他連動で影響する幅はスタイルシートでCSS指定します

 

念のため
調整は、PCで閲覧した時のサイズのみを調整しますので、スマートフォン用の
メディアコードはいじりません

 

スマートフォン用はいじらずとも自動調整なので、いじりようがない....

 

作業にめんどうはありません
基本的に、900で指定される数値を書き換えればよいわけです

 

フッターの記載もありますが、ここは変更しないでも自動調整されます

 

 

スタイルシートを開きましょう

 

サイトの幅
以下へ到達してください

 

/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: 900px;
background-color: #FFF;
}

 

 

 

width: 900px;が、サイト幅です
好みの数値に書き換える

 

 

一カラムでしたらこれで終了

 

でも、2カラムは以下作業が追加されます

 

 


 

ヘッダー横サイズ変更

 

/* ヘッダー
==================================================
*/
#headerbox .inner {
text-align: center;
}
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;
}

 

 

width: 900px;が、サイト幅です
好みの数値に書き換える

 


ここ大事
ヘッダーに使う画像は、自動で横拡張はしませんので、右に拡張されずの
空きスペースが現れてしまうのですね

 

ペイントツールなどで、横に引き延ばすか、再加工、再編集してサイト幅に合わせ、
ファイル保存して、再読み込みしてください


 

グローバルナビの幅

 

/* トップメニュー
==================================================
*/
*:first-child+html body {
padding-left: 1px;
}
#nav {
border-bottom: 4px solid #d59097;
background-color: #a91d2a;
}
#topmenubox {
margin: 0 auto;
text-align: center;
width: 916px;
}
#topmenubox #topmenubtn {
display: none;
}
#topmenu ul,#topmenu li{
list-style-image: none;
list-style-type: none;
background-image: none;
}
#topmenu ul {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
font-weight: 700;
overflow: hidden;
width: 900px;
padding: 10px 0;
}

 


 

フッターは2か所変更

 

フッター
==================================================
*/
#footer {
border-top: 3px solid #d59097;
background-color: #a91d2a;
color: #FFF;
font-size: 12px;
margin: 0 auto;
text-align: center;
}
#footer .inner {
margin: 0 auto;
overflow: hidden;
padding: 2px 0 2px;
width: 900px;
text-align: center;
font-size: 13px;
}
#footer a {
color: #FFF;
}
#footer p {
float: right;
overflow: hidden;
position: relative;
word-wrap: break-word;
}
#footlinkbox {
background-color: #a91d2a;
padding: 10px 10px 5px;
text-align: center;
}
#footermenu {
ont-size: 0;
letter-spacing: -.40em;
line-height: 26px;
margin: 0 auto;
text-align: left;
max-width: 900px;
}

 


 

最後に
記事幅とサイドメニュー幅の変更箇所

 

ここだけ数値の書き換えに配分を考えます

 

配分とは、記事幅のサイズとメニュー幅を足した合計サイズがサイト幅

 

でも、指定サイズがぎりぎりですとサイドメニューは入りきれず押しやられます

 

 

コンテンツは、width: 640px;

 

 

 

==================================================
メインコンテンツ
==================================================
*/
/* 記事領域
==================================================
*/
#main {
float: right;
overflow: hidden;
word-wrap: break-word;
width: 640px;
}

 

 

 

サイドメニューは、width: 220px;で調整

 

 

サイドメニュー
==================================================
*/
/* メニュー
==================================================
*/

 

#menu img{
max-width:100%;
height:auto;
}

 

#menu {
float: left;
overflow: hidden;
width: 220px;
}

 

 

参考までに

 

1000Pxのサイト幅で以下に指定した場合

 

記事幅 width: 580px;
メニュー幅 width: 400px;

 

 

20PXほどスペースありですが、これ以上詰めるとサイドメニューがおさまりきれず
下方へ押しやられます
20PXは,スペースを空ける余裕の数値配分としましょう

 


 

サイトサイズの拡張に伴うサイドメニュー、記事幅の変更方法
サイト幅、メニュー幅、レイアウト、その他各種調整方法まとめ
トップページ

関連ページ

見出しh3、h4、メニューリスト枠の縦幅(高さ)の調整方法
シリウスのレスポンシブの2カラム対応で、見出しh3、h4とテキスト(リスト)項目の縦枠サイズを変更するCSS調整のご案内です
見出しh2.h3.h4の背景枠の角を丸くする
シリウスのデフォルト見出しは角角ですが、やさしさをのあるサイトイメージを演出するなら丸みをつけてみるのもひとつの手段