質問内容

 

テンプレートの横幅を変更した後の　サイト全体の調整について

 

いつもシリウスのサポート情報どうもありがとうございます
大変参考になっております

 

最近デフォルト1カラムでサイトを作っていましたところ
2カラムテンプレートでもトップページのみ1カラムにできる
という記事を拝見し　早速試してみました

 

1カラム⇒2カラム（トップページのみ1カラム）
1カラムでページ作成していた時は

 

テンプレートの横幅１０００
メインカラムの横幅９５０

 

で作成していました

 

その後　メインメニューも表示させてサイトの利便性を上げる目的から
テンプレートの幅を

 

テンプレートの横幅１０００
メインカラムの横幅７３０
メインメニューの横幅２２０

 

に変更したところ、サイト全体が写真のように崩れてしまいました

 

 

これを

 

テンプレートの横幅１０００
メインカラムの横幅７３０
メインメニューの横幅２２０

 

に合わせてサイトの画像やコンテンツを調整するにはどのように
すればよろしいでしょうか？

 

 

またトップページのみ1カラムで

 

テンプレートの横幅１０００
メインカラムの横幅９５０

 

この状態にすることはスタイルシートの変更などで
可能ですか？

 

トップページにはアメイジングスライダーを９００ｐｘで設置しており
また他の画像などもメインカラム横幅９５０に合わせて設定しているので
もしこのスタイルをトップページだけ残せる方法があれば教えて頂きたく
思います

 

 

大変お手数おかけ致しますがどうぞ　よろしくお願い致します

 

 

2015年7月25日 03:18
四万十様よりの質問です

 

---

 

スポンサーリンク

 

 

 

 

ご返事

 

 

いつもご利用ありがとうございます

 

記す機能
テンプレートの横幅設定の際はメニューのチェックを外して置きましょう
非推奨と記されています

 

一カラムを２カラムに戻したようですが

 

画像より現在のレイアウト崩れは確認できますが

 

 

スタイルシートのclass指定の記載は削除したのでしょうか？

 

 

また　カテゴリーエントリーともに同じにしたということですか？かが不明です

 

 

 

class指定がテンプレート横幅指定よりレイアウト表示は優先されます

 

もしやこれが原因かもと？

 

思われますが詳細が不明で正確な予想ができません

 

 

 

コンテンツは記事列の折り返し地点を確認し編集

 

 

画像はコードのwidth:500pxで調整可能

 

<img src="<% pageDepth %>img/1aaaaaa.png" style="width:500px;" alt="" />

 

 

 

 

 

またトップページのみ1カラムで

 

テンプレートの横幅１０００
メインカラムの横幅９５０

 

とございますが　class指定を残してあるのであれば

 

操作画面のテンプレートの横幅指定はカテゴリーエントリーで反映され
トップページはclass指定しているのでスタイルートで優先指定します

 

 

当サイトでは以下の記載で記事幅を指定しております

 

 

body.top　　この箇所に追加します/ 説明は削除してください
#main {
float: left;
width: 880px;　９５０書き換え
}

 

 

その下に以下記述を加えます

 

数値のみ変更してください

 

 

/* 基本レイアウト */

 

 

 

サイト幅指定

 

body.top
#container {
width: 900px;　　サイト幅　１０００書き換え
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}

 

上記は他の調整もしているので確認のみでコピペしては使わないでください

 

 

 

 

2カラムのサイトであれば横サイズが２００ですね

 

以下のの180を２２０にします

 

 

サイドフリースペースメニュー幅
body.top
#rmenu {
float: right;
width: 180px;

 

}

 

 

 

サイドメインメニュー幅
body.top
#menu {
float: right;
width: 180px;
padding-top: 1px;
padding-bottom: 10px;

 

}

 

 

 

記事列が
レイアウトに合わなければ　数値を少しずつ変えてプレビューで
確認調整します

 

 

説明が下手ですみませんが

 

難易であればトップページのHTMLソースとスタイルシートをお送り下さい
レイアウト確認後　修正して後お送りします

 

 

---

 

リメール

 

 

お世話になります

 

こちら　説明不足で申し訳ありませんでした

 

ご指摘して頂いた通り　今一度チェックさせて頂きました

 

スタイルシートのclass指定の記載は削除できていませんでした

 

今回　アドバイス頂いた点を改善したところ　求めていた状態になりました

 

いつもアドバイスありがとうございます！

 

 

 

スポンサーリンク

 

 

 

 

 

---

 

1.2カラム複合レイアウト崩れの関連質問１
シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ