リバースメニューサイト2重レイアウト構築手順

Sirius.customize

TOP

トップページ

質問

シリウスカスタマイズサポート

ご案内

サイトマップ

個別レイアウト指定とレスポンシブウェブデザイン追加手順

シリウスの3カラムリバースメニュー構成をトップページではデフォルト機能で
3カラム指定　カテゴリーページエントリーページは2カラムとして指定し
レスポンシブウェブデザインを　どちらの指定ページでも適合表示する
手順を解説します

解説は　すでにリバースメニューサイトにカスタマイズしてあることを
前提に進めますが　未対応の方は
こちらでご確認ください
シリウスサイドメニューを縦2列　リバースメニューカスタマイズ
上記ページでのレスポンシブウェブデザイン追加手順は　当該コンテンツに
該当しないため使用しないでください

今回のカスタムに必要な記述コードは当ページのものを使用します

デフォルトテンプレート3カラムからのリバースメニュー配置サイト対応
となります

修正報告

2カラムの記事幅をスタイルシートでthreeboxのみを使用して
おりましたがmainも追加しました

では進めます

操作画面設定

テンプレート横幅　９８０ＰＸ
メインカラム横幅　４６５ＰＸ
メインメニュー　　　１８０ＰＸ
サイドメニューを　３００ＰＸに指定します

という設定とした例で進めます

html　追加記載

htmlテンプレートを開いて下さい
上から行きます

<head>の下　metaの行以下にレスポンシブウェブデザインで
あることを検索エンジンに知らせるviewporを追加して下さい
トップからリンク集htmlまですべて貼り付け

完了しましたら　次へ進みます

classの指定

トップページはシリウス機能で指定してますのでいじりません

カテゴリー　エントリーページを改編しますのでclassの指定を行います

カテゴリー　エントリーページhtmlテンプレート内のどちらも

<body>記載をclassの指定に書き換えます

カテゴリー<body>を
<body class="category">とします

エントリー<body>を
<body class="entory">とします

classを指定し　スタイルシートで読み込む際個別認識ができるのです

ｈｔｍｌ記載はここで終了

次は
スタイルシートへ進みます

間違いを防ぐため上から進めますね

以下コードに到達してください

p {
width ;auto　
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

上記コード下に以下の　body.category　body.entoryをclass指定した
記述を追加します

2カラムの記事幅を指定します

classの指定を付随した記述です

以下コードをコピーして貼り付け

body.category　　
p {
width: 65px;
margin-right: auto
margin-left: auto;
margin-top: 0px;
margin-0bottom: 0px;
}

body.entory　　　
p {
width: 650px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

次は
レイアウト差分に到達します

2カラムで記事幅を指定する

以下の　mainとthreeboxの二つを追加します

記述コードを新たに追加してください

ここから
body.category
#main {
float: left;
width: 650px;
}

body.entory
#main {
float: left;
width: 650px;
}
ここまで

もう一つ
ここから
body.category
#threebox {
float: left;
width: 650px;
}

body.entory
#threebox {
float: left;
width: 650px;
}
ここまで

追加箇所

/* レイアウト差分 */

#contents {
padding-right:0px;
padding-left: 5px;
}

#main {
float: left;
width: 470px;
}

ここから
body.category
#main {
float: left;
width: 650px;
}

body.entory
#main {
float: left;
width: 650px;
}
ここまで

#threebox {
float: left;
width: 470px;
}

ここにも追加
body.category
#threebox {
float: left;
width: 650px;
}

body.entory
#threebox {
float: left;
width: 650px;
}
ここまで

#main h2,#main h3{
font-size:16px;
}

以上で3カラム　2カラムの異なるレイアウト変更は完了します

ですが　一カラムでは指定作業が追加されます

エントリーページで一カラムを指定する

これまでの作業では　エントリーページ3カラムでは正常にスタイルは
反映されますが
エントリーページで　まれに上級者設定で一カラムを指定する際も
ございますね

その際は　スタイルの割り込みで　記載を入力しなければ
今回の改行が影響して右に記事スペースが空くというサイト構成に
なっていまい　正常な一カラムに成らないとなってしまいます

ですので　一カラムにした際は　以下記述をスタイルの割り込み欄に
記載入力してください

記事横幅が合わない場合は　数値を少なめに調整します

body.entory
#container{
width: 900px;
}

body.entory
#main {
float: left;
width: 900px;
}

body.entory　　　
p {
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

body.entory
#threebox {
float: left;
width: 900px;
}

body.entory
max-width: 900px;
h3{
height: 100%;
width: 900px;
}

レスポンシブウェブ化する際は　以下の説明の巻末に説明あり

では　レスポンシブウェブデザインを追加しましょう

レスポンシブウェブデザインを発動させる記載

以下記載はサイトをレスポンシブウェブとして作動させるものです

コピーして一番下に張り付けて保存すれば
シリウスのプラウザプレビューで作動はすぐに確認いただけます

@media(max-width:690px){
#container{
width: 100%;
}

#main {
float: left;
width:100%;
padding:1% 1%;
}

body.category
#main {
float: left;
width:98%;
}

body.entory
#main {
float: left;
width:98%;
}

#sidebar{
width:30%;
}
img{
max-width: 100%;
height: 100%;
width: auto;
　　display:block;
}
h3{
max-width: 96%;
height: 100%;
width: 95%;
}

#threebox {
float: left;
width: 100%;

}

body.category
#threebox {
float: left;
width: 100%;
}

body.entory
#threebox {
float: left;
width: 100%;
}

body.category
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

body.entory
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;

}

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<% pageTitleColor %>
width:100%;
}

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width:100%;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>

}

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 100%;
position: absolute;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

#menu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;

}

#rmenu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 5px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;
}
}

ここまで

以上で貼り付け終了

記載の意味

@media(max-width:690px){
690pxの数値指定は　ここから以下のデバイスではレスポンシブウェブと
なりますよ　というもの

その指定地は　サイト運営者により異なります
自分で一番良いと思われる数値にしてください

後々　何度でも数値は変えられます

#container{
width: 100%;
}

#main {
float: left;
width:100%;
padding:1% 1%;
}

弄らずでよい

body.category
#main {
float: left;
width:98%;
}

カテゴリーページｈｔｍｌを指定

width:98%;は　記事右端のメニューとの僅かな隙間調整
width:100%にすると隙間が無くなります　以下も同じく

body.entory
#main {
float: left;
width:98%;
}

エントリーページｈｔｍｌを指定

#sidebar{
width:30%;
}
img{
max-width: 100%;
height: 100%;
width: auto;
　　display:block;
}
h3{
height: 100%;
width: 100%;
}

#threebox {
float: left;
width: 100%;

}

body.category
#threebox {
float: left;
width: 100%;
}

body.entory
#threebox {
float: left;
width: 100%;
}

body.category
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

body.entory
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;

}

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

レスポンシブウェブ化　した際のサイトタイトルサイズ

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<% pageTitleColor %>
width:100%;
}

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width:100%;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>

}

#menu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

#rmenu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

検索ボックス
#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 5px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;
}
}

特段変更する必要のないものは説明を省いてますが

各変更は数値のみが良いと思われます

その他を変えると　不作動やらずれが続出します

エントリーページでの一カラム指定レスポンシブウェブ追加

エントリーページで　まれに一カラム指定する際の記載は　上記に
説明ありですが　レスポンシブウェブ化する際は　同じく
スタイルの割り込み欄にレスポンシブ化コードを埋め込まなければ
作動しないのです

スタイルシートでレスポンシブ化は指定しているものの
一カラムではなぜか？　反映されないためです

以下記載を　スタイルの割り込み欄位貼り付ければ完了します

body.entory
#contents {
padding-right: 10px;
padding-left: 20px;
}

body.entory
#container{
width: 980px;
}

body.entory
#main {
float: left;
width:980px;
padding:1% 1%;
}

body.entory
#main {
float: right;
width: 950px;
}

body.entory
img{
max-width: width:950px;
height: 100%;
width: auto;
　　display:block;
}

body.entory
h3{
height: 100%;
width:950px;
}

body.entory
#threebox {
float: left;
width: 950px;
}

body.entory
p {
width:950px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

@media(max-width:980px){
body.entory
#container{
width: 100%;
}

body.entory
#contents {
padding-right: 1%;
padding-left: 1%;
}

body.entory
#main {
float: left;
width:100%;
padding:1% 1%;
}

body.entory
#main {
float: left;
width:100%;
}

body.entory
img{
max-width: 98%;
height: 100%;
width: auto;
　　display:block;
}

body.entory
h3{
height: 100%;

width: auto;
}

body.entory
#threebox {
float: left;
width: 100%;
}

body.entory
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

body.entory
#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;

}

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<% pageTitleColor %>
width:100%;
}

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width:100%;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>
}

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 5px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;

}
}

ここまでです

数値は　レイアウトサイズにより書き換えてください
ここの数値変えても　レイアウトは崩れません

あれこれと弄り回して結果で　今時点で一番良いと思われる
正常スタイルで表示されるよう構成しておりますが
以降更なるカスタムを望む方は自己責任でお願いします

というより　わずかでもいじると一部不作動になる確率が９９％です

リバースメニューサイト2重レイアウト構築手順
 リバースメニュー3カラムトップと下層複合デザインレイアウト構築法
 シリウスカスタマイズ

個別レイアウト指定とレスポンシブウェブデザイン追加手順

操作画面設定

html　追加記載

classの指定

レスポンシブウェブデザインを発動させる記載

スポンサー広告

レスポンシブオンリー

個別レイアウト指定とレスポンシブウェブデザイン追加手順

操作画面設定

html 追加記載

classの指定

レスポンシブウェブデザインを発動させる記載

スポンサー広告

レスポンシブオンリー

html　追加記載