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


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    関連記事


     スポンサーリンク

    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テンプレート
    シリウスカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト