サイトマップ
３カラム ２カラム併用スタイル レスポンシブ化を含めたカスタマイズ手順
今回のカスタマイズは デフォルト3カラムをシリウス操作画面での
サイト詳細設定で、カテゴリー以下階層のフリースペースの表示を
非表示指定にして3カラムを2カラムにするデフォルト機能解説ではなく
ＣＳＳ指定により...
トップページ以下のカテゴリー エントリーページをデフォルトの2カラム
スタイルと同様の表示構成に変えるもので一サイトで
3カラム 2カラム複合表示構成となります
また,デフォルト3カラムテンプレートを主体にカスタマイズするもので
複合構成に適合するよう指定した構築にしておりますので
ビジネステンプレートおよび他のカラムには適合しません
他のカラムテンプレートでは取り付けは出来るもののCSS指定が合わず
適切にコントロールできないため不作動があるということです
他のカラムについては検証ごとに追記して参ります
前置き
今回のカスタマイズは、異なるレイアウトを一つのサイトで表すため、class
指定での指示記載が置くなる理由で、些細な記載ミス行でもあれば
レイアウトが正確に表示されません
レイアウト崩れも発症します
デフォルトＴＰからカスタムするとその他いろんなものをいじる必要にも迫られます
そんなことで、シリウス初心者の方には意味不明な事態を招く危険もあり
...慣れない時期はご遠慮ください
また、永く携わっていてもカスタマイズ慣れしていない場合も同様...
ある程度の理解が可能な方だけご利用ください
参考
類似コンテンツ
２カラムトップページと下層のレイアウトを異なるスタイルで
表示する2元スタイルカスタマイズ
トップページとカテゴリー以下のレイアウトを変えたレスポンシブ
スポンサーリンク
今回の構成スタイルは....
トップページは3カラム カテゴリーページを含むメインメニューは左配置で
フリースぺースを含むサイドメニューは右配置が基本で進めます
カテゴリーを含む階層は2カラムでメイン サイドメニュ―とも右配置
2カラムのサイドメニューはワイドサイズ可
エントリーページの場合はカテゴリーページ同様右メニューの
2カラムとして進めますがトップページ同様 3カラムでも表示は可能です
エントリー個別ページを一カラムへ変更の際はスタイルシート改行が
影響してしまい..デフォルト一カラムのレイアウトにサイドメニュースペースが
空いてしまう事になります
正常なエントリー個別ページ一カラムを表示する対処法は手動での
スタイルの割り込みに指定を追加しなければなりません
巻末に説明あり
レスポンシブウェブデザイン対応を含めた工程となりますが、事情により
非対応を選択する際はレスポンシブ化のステップを省いてください
ＨＴＭＬの理解に不安のある方はスタイルシートのレイアウトエラーを
防ぐため現在運営中のサイトでカスタムするのではなく
新規サイトで
3カラムテンプレートを呼び出してから実行し..反映確認後
本サイトへ実行されてください
htmlテンプレートからスタイルシートへの記載および改行を順に
進めてまいります
ステップ1
テンプレート選択時に
メニュー位置は左と指定してください
今回は3カラムでサイト幅１０００ＰＸ
右に表示のサイトメニューは１８０ＰＸ
左表示のフリースペースは ３００ＰＸとしての構成で進めますが
異なるサイト幅をご利用の際は数値を割合で指定修正してください
では進めます
最初に操作画面 テンプレートの横幅設定で
テンプレート横幅 １０００ＰＸ
メインカラム横幅 ４７０ＰＸ
メインメニュー １８０ＰＸ
サイドメニューを ３００ＰＸに指定します
ステップ2 ＨＴＭＬテンプレート記載
ＨＴＭＬテンプレートを開いてください
レスポンシブウェブデザインであることをグーグルさんへお知らせする
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" />
１－２ class指定
トップ カテゴリー エントリーページhtmlをスタイルシートで識別指定する
ためのclass 指定をトップページ以外で指定改行します
トップページはそのままいじりません
カテゴリー エントリーページhtmlは、スタイルを独自に変える必要があり
トップページと同じhtml要素ではスタイル指定ができないのです
とりあえずはカテゴリー エントリーのみ変更します
以降ページはは自己判断で願います
htmlテンプレート内
<body>をclass指定に書き換えます
カテゴリーページ
<body class="category">
エントリーページ
<body class="entory">
ページ指定 category entory名は 任意で他の名称でも構いませんが
一度反映スタイルをご確認後以降に書き換えてください
ＨＴＭＬ記載 次
１－３ メイン サイドメニューを同じ配列に表示する指定の移動
カテゴリー エントリーではトップページで表示される左サイトメニューを
右に表示されるよう位置替え指定をします
以下の箇所へへ到達してください
<!-- ★サイドメニューここから★ -->
<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>
<!-- ★サブメニューここまで★ -->
上記作業は、カテゴリー エントリーＨＴＭＬ内で行います
トップページテンプレートでは行わないでください
2カラム以降
サイトメニュー フリースペースｈ３ ｈ４メニューのメニュー表示は
サブメニュー内に置くか 置かないかで表示 非表示の
選択ができます
2カラム以降、フリースペースのみでやられている方もおりましたので
参考がてらの意見です
ｈｔｍｌ終わり
ステップ３
次にスタイルシートを開いてください
簡潔に進めるためコードをコピーしてあなたのスタイルシートへ
張り付ければ完了できるようにしております
スタイルシートでは カテゴリー エントリーともに 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カラムスタイルへ超カスタマイズ
シリウスカスタマイズトップ
