TOP

3カラム 2カラム併用スタイル レスポンシブ化を含めたカスタマイズ手順

今回のカスタマイズは デフォルト3カラムをシリウス操作画面での
サイト詳細設定で、カテゴリー以下階層のフリースペースの表示を
非表示指定にして3カラムを2カラムにするデフォルト機能解説ではなく

 

CSS指定により...
トップページ以下のカテゴリー エントリーページをデフォルトの2カラム
スタイルと同様の表示構成に変えるもので一サイトで
3カラム 2カラム複合表示構成となります

 

また,デフォルト3カラムテンプレートを主体にカスタマイズするもので
複合構成に適合するよう指定した構築にしておりますので 

 

ビジネステンプレートおよび他のカラムには適合しません

 

他のカラムテンプレートでは取り付けは出来るもののCSS指定が合わず
適切にコントロールできないため不作動があるということです
他のカラムについては検証ごとに追記して参ります

 

前置き
今回のカスタマイズは、異なるレイアウトを一つのサイトで表すため、class
指定での指示記載が置くなる理由で、些細な記載ミス行でもあれば
レイアウトが正確に表示されません

 

レイアウト崩れも発症します
デフォルトTPからカスタムするとその他いろんなものをいじる必要にも迫られます

 

そんなことで、シリウス初心者の方には意味不明な事態を招く危険もあり
...慣れない時期はご遠慮ください
また、永く携わっていてもカスタマイズ慣れしていない場合も同様...

 

ある程度の理解が可能な方だけご利用ください

 

参考
類似コンテンツ
2カラムトップページと下層のレイアウトを異なるスタイルで
表示する2元スタイルカスタマイズ
トップページとカテゴリー以下のレイアウトを変えたレスポンシブ

 


 

スポンサーリンク

 

 


 

今回の構成スタイルは....

 

トップページは3カラム カテゴリーページを含むメインメニューは左配置で
フリースぺースを含むサイドメニューは右配置が基本で進めます

 

カテゴリーを含む階層は2カラムでメイン サイドメニュ―とも右配置

 

2カラムのサイドメニューはワイドサイズ可

 

エントリーページの場合はカテゴリーページ同様右メニューの
2カラムとして進めますがトップページ同様 3カラムでも表示は可能です 

 

エントリー個別ページを一カラムへ変更の際はスタイルシート改行が
影響してしまい..デフォルト一カラムのレイアウトにサイドメニュースペースが
空いてしまう事になります

 

正常なエントリー個別ページ一カラムを表示する対処法は手動での
スタイルの割り込みに指定を追加しなければなりません
巻末に説明あり

 

 

レスポンシブウェブデザイン対応を含めた工程となりますが、事情により
非対応を選択する際はレスポンシブ化のステップを省いてください

 

 

HTMLの理解に不安のある方はスタイルシートのレイアウトエラーを
防ぐため現在運営中のサイトでカスタムするのではなく
新規サイトで
3カラムテンプレートを呼び出してから実行し..反映確認後
本サイトへ実行されてください

 

 

htmlテンプレートからスタイルシートへの記載および改行を順に
進めてまいります

 

ステップ1

 

テンプレート選択時に
メニュー位置は左と指定してください

 

 

今回は3カラムでサイト幅1000PX
右に表示のサイトメニューは180PX
左表示のフリースペースは 300PXとしての構成で進めますが
異なるサイト幅をご利用の際は数値を割合で指定修正してください

 

 

では進めます

 

最初に操作画面 テンプレートの横幅設定で

 

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

 

 

 ステップ2 HTMLテンプレート記載

 

HTMLテンプレートを開いてください

 

レスポンシブウェブデザインであることをグーグルさんへお知らせする
viewport を全てのテンプレート内のmetaの箇所に張り付けます
トップページから リンク集まで

 

<head>の下あたりで良いと思われます

 

以下記述コード コピーして貼り付け
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="../styles.css" />

 

 

1-2 class指定

 

トップ カテゴリー エントリーページhtmlをスタイルシートで識別指定する
ためのclass 指定をトップページ以外で指定改行します

 

トップページはそのままいじりません

 

カテゴリー エントリーページhtmlは、スタイルを独自に変える必要があり
トップページと同じhtml要素ではスタイル指定ができないのです

 

 

とりあえずはカテゴリー エントリーのみ変更します
以降ページはは自己判断で願います

 

 

htmlテンプレート内

 

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

 

カテゴリーページ
<body class="category">

 

エントリーページ
<body class="entory">

 

ページ指定 category entory名は 任意で他の名称でも構いませんが
一度反映スタイルをご確認後以降に書き換えてください

 

 

HTML記載 次

 

1-3 メイン サイドメニューを同じ配列に表示する指定の移動

 

 

カテゴリー エントリーではトップページで表示される左サイトメニューを
右に表示されるよう位置替え指定をします

 

以下の箇所へへ到達してください

 

<!-- ★サイドメニューここから★ -->
<div id="menu">

 

<% freeSpace3 %>

 

<% siteMenu %>
<% freeSpace4 %>
</div>
<!-- ★サイドメニューここまで★ -->

 

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">
<% freeSpace5 %>

 

<% subMenu %>

 

<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->

 

 

 

サイドメニュー内の

 

<% freeSpace3 %>

 

<% siteMenu %>
<% freeSpace4 %>

 

 

取り外し..デフォルト位置で右に位置するサブメニュー内へ移動します

 

 

<!-- ★サイドメニューここから★ -->
<div id="menu">

 

 

 

<!-- ★サイドメニューここまで★ -->

 

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">

 

<% freeSpace3 %>

 

<% siteMenu %>
<% freeSpace4 %>

 

<% freeSpace5 %>

 

<% subMenu %>

 

 

<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->

 

上記作業は、カテゴリー エントリーHTML内で行います

 

トップページテンプレートでは行わないでください

 

 

2カラム以降 

 

サイトメニュー フリースペースh3 h4メニューのメニュー表示は
サブメニュー内に置くか 置かないかで表示 非表示の
選択ができます

 

2カラム以降、フリースペースのみでやられている方もおりましたので
参考がてらの意見です

 

html終わり


 

ステップ3

 

次にスタイルシートを開いてください

 

簡潔に進めるためコードをコピーしてあなたのスタイルシートへ
張り付ければ完了できるようにしております

 

スタイルシートでは カテゴリー エントリーともに class指定読み込みを
各記述コードの上に置くことで識別されます

 

<body class="category">を
body.category

 

<body class="entory">を
body.entory 
と改行します

 

 

上から行きます

 

カテゴリー エントリーでの記事カラム内の文字どまり位置

 

以下記述に到達してください
p {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

 

カテゴリー エントリーでの記事カラム内の文字どまり位置

 

上記行下にカテゴリー エントリーでは同スタイルなのですが
個々に読み込まれるよう識別指定を追加します

 

 

記載例

 

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

 

 

body.category  / class指定 
p {
width: 640px; 
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

 

 

body.entory   / class指定 
p {
width: 640px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
ここまで

 

/ class指定は、削除してください

 

width: auto;は テンプレートサイト横幅設定内でのメインカラム幅を
読み込むよう指定しています

 

そのままでは記事カラムがトップページ同様のサイズですので
2カラムに合わせました
width: 640px;記事内カラム幅

 

 

 


 

次 レイアウト差分に到達してくださあい

 

/* レイアウト差分 */

 

#contents {
padding-right: 10px;
padding-left: 10px;

 

}
ここから下で追加行

 

以下行に識別コード追加

 

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

 

追加行
body.category
#main {
float: left;
width: 670px;
}

 

追加行
body.entory
#main {
float: left;
width: 670px;
}
ここまで

 

mainの数値指定は トップページで反映されるもので 
テンプレート横幅サイズで設定した メインカラム幅と
同じにします
#main {
float: right;
width: 470px;
}

 

 


 

次です

 

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

 

上記行下に以下追加

 

body.category
#threebox {
float: left;
width: 670px;
}

 

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

 

threeboxとは 見えませんが記事カラムの枠ですね
width: 670pxで指定

 

 

まとめ
以下コピーしてお使いください

 

/* レイアウト差分 */

 

ここから下

 

 

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

 

追加行
body.category
#main {
float: left;
width: 670px;
}

 

追加行
body.entory
#main {
float: left;
width: 670px;
}

 

 

 

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

 

追加行
body.category
#threebox {
float: left;
width: 670px;
}

 

追加行
body.entory
#threebox {
float: left;
width: 670px;
}

 

追加行の記載は削除
ここまで レイアウト構成は完了します

 

 

 

ステップ4 エントリーぺージ 一カラムへの対処

 

 

エントリーページ指定
上級者設定で一カラムを指定した際は改行の影響で
右にメニュースペースが空いてしまいます

 

対処はスタイルの割り込み指定で対処します

 

スタイルの割り込み記入欄に以下記載を張り付ければ
一カラムとして正常に表示できます

 

数値はサイト幅により書き換えてください

 

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

 

 

body.entory
#contents.pcol1 {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
background-image:none;
}
body.entory
#container{
width: 1000px;
}

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

一カラムをレスポンシブ化する際は 以下巻末に記載してございます

 


 

ここからレスポンシブウェブへ進みます

 

ステップ5 レスポンシブウェブデザイン追加

 

今回のテンプレートスタイルは 3カラム 2カラムと複合して

 

エントリーページで設定可能な一カラムでも作動するよう
レスポンシブ加工しており作動も検証済みです

 

また随時記述の変更追記もよい形に切り替えを推進しており

 

上記の記載では未記載の記述も以下記述コードには含まれることも
ご了承下さい

 

以下コードの個別の意味合いの詳細はこちらのページをご覧ください
SIRIUS シリウスレスポンシブウェブデザインテンプレート設定

 

 

レスポンシブ化をサイトに追加するには
スタイルシートの一番下へ移動して以下行を張り付けてください

 

今回のサイト構成に合わせておりますが記事幅やメニュー幅を変える場合は
数値変更で対処します

 

以下数値
width:690pxは この地点からレスポンシブウェブと変化する地点を
意味します

 

 

ここから

 

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

 

 

#contents {
padding-right: 2px;
padding-left: 2px;
}

 

body.category
#contents {
padding-right: 2px;
padding-left: 2px;
}

 

 

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

 

 

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

 

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

 

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

 

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

 

h3{
max-width: 96%;
height: 100%;
width: auto;
}

 

body.category
h3{
max-width: 96%;
height: 100%;
width: auto;
}

 

body.entory
h3{
max-width: 96%;
height: 100%;
width: auto;
}

 

 

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

 

}
}
ここまでで 大まかにレスポンシブ化されます

 

 


 

エントリー 一カラムをレスポンシブ化する

 

エントリーページをまれに一カラム指定にする際は 上記手順を
踏んだとしても 改行が影響してか?
レスポンシブ化は不作動となり反映されません

 

2カラムでは動くのですが?

 

その際は上級者設定メニュー スタイルの割り込みで当該ページのみを
レスポンシブ化する記述を記載します

 

 

以下コードを数値のみ あなたのサイト幅に書き換えて コピーして
スタイルの割り込み覧に貼り付けてください

 

スマートフォンサイズでのサイズは調整してございますが
あなたの好みの範囲にしてください

 

 

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

 

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

 

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

 

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

 

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: 980px;
}

 

 

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

 

 

 

 

@media(max-width:1000px){
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;

 

}
}

 

 

ここまでです

 

 

 

 

貼り付け後 保存をお忘れなく

 

プレビューで確認しましょう

 

指定に間違いがなければ作動がご確認いただけます

 

 

3カラム2カラム併用表示テンプレート追加カスタマイズ
シリウストップは3カラム 下層は2カラムスタイルへ超カスタマイズ
シリウスカスタマイズトップ