2カラムトップページのみ一カラム個別指定変更カスタマイズ

シリウスカスタマイズＴＯＰ＞ 2カラム　トップページは一カラム構成ＨＴＭＬテンプレート＞ 2カラムトップページのみ一カラム個別指定変更カスタマイズ

2カラムテンプレートをトップページのみ一カラム個別指定する変更手順

シリウスの2カラムテンプレートのトップページのみを一カラムスタイルに
移行する手順...ソース、CSS改変解説です..

デフォルト機能でも2カラムのサイドメニューを非表示として、一カラム
みたいな..風なスタイルを演出する手立てはございます...

しかし、レイアウトは単にサイドメニューを非表示としただけで記事カラムの
サイズは拡張されていない..全体が左寄りという.とてもヘンなスタイルに
なってしまいます...それをカスタマイズの一手法と解説している例も
見られますが、なんとも不可解...?

ここで解説するレイアウト変更はサイドメニューのスペースを空けたまま
ではなく、全体を通常の一カラムとしてカスタマイズするというご案内に
なります..

トップ以下の階層、カテゴリーエントリーページは通常の2カラムです

また、今回の変更ではエントリーページでの上級者設定、レイアウトの
一カラム指定に影響は致しませんので相応に使用可能です..

デフォルトの1カラムＴＰを原本としてで以下、下層を2カラムという手立ても
あったのですが、後々を考えれば2カラム原本がベストとの理解...です..

今時代に合わせてレスポンシブウェブデザインサイトとしての構成も
含めての手順で進めます..

では進めます..

2カラムデフォルトを用意します

今回はテンプレート横幅はデフォルトサイズで900ＰＸ
メニュー幅もデフォルトサイズで進めます

テンプレート選択時メニュー配置は右位置にしてください

htmlテンプレート追記　改編

htmlテンプレート　トップページを開きます

トップページのみclass指定をします

他のカテゴリー　エントリーhtmlはいじりません

<body>の記載を以下に書き換えてください

サイドメニューを非表示にする

次にトップページでは一カラムにするためサイドメニューを非表示とします

以下記載を削除します

<div id="menu">
<% freeSpace3 %>

<% siteMenu %>
<% freeSpace4 %>
</div>

レスポンシブであることの指定

viewportコード

グーグルさんにレスポンシブサイトであること伝えるviewportコードを
追記します　

<head>のすぐ下でOKですので
以下記述をコピーして貼り付けてください

htmlテンプレート記載はここで終了

次に
スタイルシートを開きます

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

トップページのみclass指定をしましたね

ここで　トップページを一カラムへと構成するclass指定の
読み込みを指定します

以下記載を新たに組み入れます

body.top
#main {
float: left;
width: 880px;
}

以下記述項目の下へ追加します

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

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

#menu {
float: right;
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
}

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

#text1 h3,#text2 h3,#text3 h3,#text4 h3,#text5 h3,#text6 h3,#text6 h3,#text7 h3,#text8 h3,#text9 h3,#text10 h3{
position: relative;
left: -12px;
width: 610px;
<% innerH3Width(40) %>
margin-top: 15px;
margin-bottom: 15px;
}

上記述を追加で　一カラムに切り替えが完了します

body.topは　トップページのみ
880px;の記事幅であると指定してることになります

float: left;
width: 880px;

（900PXとの差分　20Pxは両サイドの差分でもともとあるもの...
気にしないで...)

ここでレイアウトをご覧いただくとデフォルトのメニューのグレー背景が
残っていますね

背景はテンプレートフォルダーの画像ファイルから読み込んでいますので
画像を削除するか　
ＣＳＳ指定で読み込みを中止すれば消えます

画像ファイルは、テンプレートを再選択画面へ進んで

表示される一覧で自分のマーキングされているフォルダを開き

その中にｉｎｇフォルダを開き

bq　ｒｉｇｈｔファイルを削除

スタイルシートで読み込みを中止する場合は

グローバルメニュー項目の以下記載から
background-image: url(./img/contents_bg_right.jpg);記載を
削除します

#contents {
_height:10px;
padding-top: 20px;
padding-bottom: 20px;
min-height:400px;
margin-top:50px;
background-image: url(./img/contents_bg_right.jpg);　この行削除
background-repeat: repeat-y;
background-position: right;
margin-top:<% topMenuMargin(47,0) %>;
}

どちらかの作業を行えば非表示となります

レスポンシブウェブデザインへの追加

最後にレスポンシブウェブデザインとしてサイトが閲覧時に作動するよう
レスポンシブの動きを指定する記述をスタイルシートの一番下に
張り付けます

768pxの数値指定で　閲覧画面が768px以下から
レスポンシブウェブデザインとして変化するよう指定しておりますが
数値調整は　サイト運営者の判断　もしくはサイト構成により
基準の特定はございません

自己判断で指定してください

以下記述を　コピーしてお使いください

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

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

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

h3{
max-width: 96%;
height: 100%;
width: 95%;

}

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

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

#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: ｌeft;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}

#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カラムトップページのみ一カラム個別指定変更カスタマイズ
 シリウス2カラム　トップページは一カラム構成ＨＴＭＬテンプレート
 シリウスカスタマイズ

2カラムテンプレートをトップページのみ一カラム個別指定する変更手順

htmlテンプレート追記　改編

サイドメニューを非表示にする

レスポンシブであることの指定

レスポンシブウェブデザインへの追加

スポンサー広告

レスポンシブオンリー

2カラムテンプレートをトップページのみ一カラム個別指定する変更手順

htmlテンプレート追記 改編

サイドメニューを非表示にする

レスポンシブであることの指定

レスポンシブウェブデザインへの追加

スポンサー広告

レスポンシブオンリー

htmlテンプレート追記　改編