TOP

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

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

 

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

 

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

 

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

 

 

修正報告

 

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

 


 

では進めます

 

操作画面設定

 

 

テンプレート横幅 980PX
メインカラム横幅 465PX
メインメニュー   180PX
サイドメニューを 300PXに指定します

 

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

 

 

 

html 追加記載

 

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

 

 

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

 

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="../styles.css" />

 

 

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

 

classの指定

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

html記載はここで終了

 


 

 

 

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

 

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

 

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

 

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;
}

 

#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;
}

 

 

#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%;
}

 

カテゴリーページhtmlを指定

 

 

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


 

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

 

エントリーページhtmlを指定


 

#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 %>

 

}

 

 

 

#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;
}

 

#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;
}

 


 

検索ボックス
#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 %>
}

 

#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;
}

 

#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;
}

 

#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;

 

}
}

 

 

ここまでです

 

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


 

 

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

 

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

 


 

 

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