TOP

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

スポンサーリンク

 

 


 

では進めます..

 

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

 

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

 

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

 

 

htmlテンプレート追記 改編

 

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

 

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

 

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

 

 

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

 

<body class="top">

 

 

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

 

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

 

以下記載を削除します

 

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

 

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

 

 

 

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

 

viewportコード

 

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

 

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

 

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

 

 

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は両サイドの差分でもともとあるもの...
気にしないで...)

 

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

 

 

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

 

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

 

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

 

その中にingフォルダを開き

 

bq rightファイルを削除

 

 

 

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

 

グローバルメニュー項目の以下記載から
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: left;
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カラム トップページは一カラム構成HTMLテンプレート
シリウスカスタマイズ