サイト幅を変えると、記事、サイドメニュー、ヘッダーの幅も調整必要
シリウスレスポンシブのテンプレートで指定されているデフォルトのサイト幅は、
構成事情によりともなう好みのサイズに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の背景枠の角を丸くする
- シリウスのデフォルト見出しは角角ですが、やさしさをのあるサイトイメージを演出するなら丸みをつけてみるのもひとつの手段