• MENU●●●●
  • リバースメニューサイト2重レイアウト構築手順


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

    スポンサー広告

    関連記事


    個別レイアウト指定とレスポンシブウェブデザイン追加手順

    シリウスの3カラムリバースメニュー構成をトップページではデフォルト機能で
    3カラム指定 カテゴリーページエントリーページは2カラムとして指定し
    レスポンシブウェブデザインを どちらの指定ページでも適合表示する
    手順を解説します

     

    解説は すでにリバースメニューサイトにカスタマイズしてあることを
    前提に進めますが 未対応の方は
    こちらでご確認ください
    シリウスサイドメニューを縦2列 リバースメニューカスタマイズ
    上記ページでのレスポンシブウェブデザイン追加手順は 当該コンテンツに
    該当しないため使用しないでください

     

    今回のカスタムに必要な記述コードは当ページのものを使用します

     

    デフォルトテンプレート3カラムからのリバースメニュー配置サイト対応
    となります

     

     

    修正報告

     

    2カラムの記事幅をスタイルシートでthreeboxのみを使用して
    おりましたがmainも追加しました

     


     

    では進めます

     

    操作画面設定

     

     

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

     

    という設定とした例で進めます

     

     

     

    html 追加記載

     

    htmlテンプレートを開いて下さい
    上から行きます

     

     

    <head>の下 metaの行以下にレスポンシブウェブデザインで
    あることを検索エンジンに知らせるviewporを追加して下さい
    トップからリンク集htmlまですべて貼り付け

     

    <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の指定

     

    トップページはシリウス機能で指定してますのでいじりません

     

    カテゴリー エントリーページを改編しますのでclassの指定を行います

     

    カテゴリー エントリーページhtmlテンプレート内のどちらも

     

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

     

    カテゴリー<body>を
    <body class="category">とします

     

    エントリー<body>を
    <body class="entory">とします

     

    classを指定し スタイルシートで読み込む際個別認識ができるのです

     

     

    html記載はここで終了

     


     

     

     

    次は
    スタイルシートへ進みます

     

    間違いを防ぐため上から進めますね

     

    以下コードに到達してください

     

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

     

    上記コード下に以下の body.category body.entoryをclass指定した
    記述を追加します

     

    2カラムの記事幅を指定します

     

    classの指定を付随した記述です

     

    以下コードをコピーして貼り付け

     

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

     

     

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

     

     

     

     


     

    次は
    レイアウト差分に到達します

     

    2カラムで記事幅を指定する

     

    以下の mainとthreeboxの二つを追加します

     

    記述コードを新たに追加してください

     

    ここから
    body.category
    #main {
    float: left;
    width: 650px;
    }

     

    body.entory
    #main {
    float: left;
    width: 650px;
    }
    ここまで

     

     

    もう一つ
    ここから
    body.category
    #threebox {
    float: left;
    width: 650px;
    }

     

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

     

     

    追加箇所

     

    /* レイアウト差分 */

     

    #contents {
    padding-right:0px;
    padding-left: 5px;
    }

     

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

     

    ここから
    body.category
    #main {
    float: left;
    width: 650px;
    }

     

    body.entory
    #main {
    float: left;
    width: 650px;
    }
    ここまで

     

     

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

     

    ここにも追加
    body.category
    #threebox {
    float: left;
    width: 650px;
    }

     

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

     

     

     

    #main h2,#main h3{
    font-size:16px;
    }

     

     

    以上で3カラム 2カラムの異なるレイアウト変更は完了します

     

    ですが 一カラムでは指定作業が追加されます


     

    スポンサーリンク

     

     


     

    エントリーページで一カラムを指定する

     

    これまでの作業では エントリーページ3カラムでは正常にスタイルは
    反映されますが
    エントリーページで まれに上級者設定で一カラムを指定する際も
    ございますね

     

    その際は スタイルの割り込みで 記載を入力しなければ
    今回の改行が影響して右に記事スペースが空くというサイト構成に
    なっていまい 正常な一カラムに成らないとなってしまいます

     

    ですので 一カラムにした際は 以下記述をスタイルの割り込み欄に
    記載入力してください

     

    記事横幅が合わない場合は 数値を少なめに調整します

     

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

     

     

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

     

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

     

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

     

    body.entory
    max-width: 900px;
    h3{
    height: 100%;
    width: 900px;
    }

     

     

    レスポンシブウェブ化する際は 以下の説明の巻末に説明あり

     


     

     

    では レスポンシブウェブデザインを追加しましょう

     


     

     

    レスポンシブウェブデザインを発動させる記載

     

    以下記載はサイトをレスポンシブウェブとして作動させるものです

     

    コピーして一番下に張り付けて保存すれば
    シリウスのプラウザプレビューで作動はすぐに確認いただけます

     

     

     

     

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

     

     

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

     

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

     

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

     

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

     

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

     

     

    ここまで

     

    以上で貼り付け終了

     


     

    記載の意味

     

     

    @media(max-width:690px){
    690pxの数値指定は ここから以下のデバイスではレスポンシブウェブと
    なりますよ というもの

     

    その指定地は サイト運営者により異なります
    自分で一番良いと思われる数値にしてください

     

    後々 何度でも数値は変えられます

     

    #container{
    width: 100%;
    }

     


     

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

     

    弄らずでよい


     

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

     

    カテゴリーページhtmlを指定

     

     

    width:98%;は 記事右端のメニューとの僅かな隙間調整
    width:100%にすると隙間が無くなります 以下も同じく


     

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

     

    エントリーページhtmlを指定


     

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

     

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

     

    特段変更する必要のないものは説明を省いてますが

     

    各変更は数値のみが良いと思われます

     

    その他を変えると 不作動やらずれが続出します

     


     

     

    エントリーページでの一カラム指定レスポンシブウェブ追加

     

    エントリーページで まれに一カラム指定する際の記載は 上記に
    説明ありですが レスポンシブウェブ化する際は 同じく
    スタイルの割り込み欄にレスポンシブ化コードを埋め込まなければ
    作動しないのです

     

    スタイルシートでレスポンシブ化は指定しているものの
    一カラムではなぜか? 反映されないためです

     

    以下記載を スタイルの割り込み欄位貼り付ければ完了します

     

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

     

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

     

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

     

    body.entory
    #main {
    float: right;
    width: 950px;
    }

     

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

     

     

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

     

     

     

     

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

     

    }
    }

     

     

    ここまでです

     

    数値は レイアウトサイズにより書き換えてください
    ここの数値変えても レイアウトは崩れません


     

     

    あれこれと弄り回して結果で 今時点で一番良いと思われる
    正常スタイルで表示されるよう構成しておりますが
    以降更なるカスタムを望む方は自己責任でお願いします

     

    というより わずかでもいじると一部不作動になる確率が99%です

     


     

     

    リバースメニューサイト2重レイアウト構築手順
    リバースメニュー3カラムトップと下層複合デザインレイアウト構築法
    シリウスカスタマイズ

     

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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