• MENU●●●●
  • リバースメニュー配置サイトレスポンシブウェブデザインカスタマイズ


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

    スポンサー広告

    関連記事


    リバースメニュー配置サイトへシリウスレスポンシブウェブデザインを追加導入するご案内

    シリウスの3カラムをリバースメニューとカスタマイズ以降のサイトへ
    スマートフォン タブレット ipad対応の閲覧デバイスで適合表示される
    レスポンシブウェブデザインを追加する手順をご案内いたします

     

    作動状況

     

    リバースメニューは 通常構成とは異なり 右サイドに

     

    メインメニュー メニューを縦2列に配置しており 閲覧デバイスの
    サイズにより メニューが巻末へ移動します

     

    スマートフォンで当サイトをご覧になれば表現状況がご確認いただけます

     


     

    手順は2工程

     

    では進めます

     

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

     

     

    <head>の下 meta の箇所にviewportを配置します
    コピーして貼り付けて下さい

     

    <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テンプレート記載 ここで終了

     


     

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

     

    一番下でよいので 以下の記述をコピーして貼り付けて保存してください

     

    それだけで完了します

     

    @media(max-width:640px){

     

    #container{
    width: 98%;
    }

     

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

     

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

     

    h3{
    height: 100%;
    width: 100%;
    }

     

     

     

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

     

     

     

    #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: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

     

    #rmenu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

     

    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 2px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }

     

     


     

    記述コードの意味を簡単に説明しますので
    カスタマイズの参考にしてください

     

     

    @media(max-width:640px){
    640px以下のデバイスで レスポンシブウェブ画作動します
    それ以上のサイズではPC画面ですが 運営者により
    指定値が異なるようです
    自分サイトはどこからが良いかは 自己判断にゆだねます

     

    因みに当サイトは 以下指定数値です

     

     

     

    #container{
    width: 98%;
    }
    98%;は レスポンシブ化した際の右サイドの隙間です

     

    ぎりぎりよりは多少の隙間を開けるための数値
    100%ですと 隙間なし

     

     

    メインカラム
    #main {
    width:100%;
    padding:1% 1%;
    }

     

    サイドのメニュー
    #sidebar{
    width:30%;
    }

     

     

    画像です
    img{
    max-width: 100%;
    height: auto;
    width: auto;
      display:block;
    }

     

    見出しです

     

    h3{
    height: 100%;
    width: 100%;
    }

     

     

    記事全体の枠で 記事が折り返される地点にある
    通常は見えませんけどあるみたいで この指定は重要です
    #threebox {
    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;
    }

     

     

    decoration サイトの説明文
    #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;
    }

     

     

    以下2行は いじらずが良いです
    #menu {
    float: left;
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

     

    #rmenu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

    検索ボックスです
    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 2px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }

     

    ここまで

     

    以上で サイトのレスポンシブ化は可能となります

     

    ですが 一つだけお伝えしなければならないことがありますので
    以下参照

     


     

    エントリーページ一カラムでのレイアウト調整方法

     

    上記手順で進めればサイト全体がレスポンシブ化しますが

     

    上級者設定でエントリーページを一カラムとした際は

     

    スタイルシート改行が影響して レスポンシブ化は反映されるのですが

     

    記事カラムの両サイドに20PX程のスペースが空いてしまい

     

    スマートフォンで閲覧すると スペースが空きすぎ 記事列が
    通常サイトより 短縮表示されてしまうのです

     

    対処法は スタイルの割り込み欄に見やすく表示されるよう
    指定コードを記載すれば適合表示されます

     

    一カラムと指定した操作画面で上級者を選択し
    スタイルの絵ありこみ欄に
    以下記述を張り付けてください

     

    ここから

     

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

     

    #contents.pcol1 {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    background-image:none;
    }

     

    #container{
    width: 1000px;
    }

     

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

     

     

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

     

     

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

     

     

    h3{
    height: 98%;
    width:950px;
    }

     

     

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

     

     

     

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

     

     

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

     

     

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

     

     

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

     

     

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

     

     

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

     

     

    h3{
    height: 100%;
    width: 98%;
    }

     

     

    #threebox {
    float: left;
    width: 100%;
    }

     

     

     

    p {
    width: 100%;
    margin-right: 0px;
    margin-left: 0px;
    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: #FF0A0A;
    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;

     

    }
    }

     

    以上で完了です
    プレビューでご確認ください

     

    スポンサーリンク

     

     

    リバースメニュー配置サイトレスポンシブウェブデザインカスタマイズ
    シリウスサイドメニューを縦2列 リバースメニューカスタマイズ
    シリウスカスタマイズ

    リバースメニュー配置サイトレスポンシブウェブデザインカスタマイズ関連解説
    リバースメニューの微調整カスタマイズ
    シリウスでリバースメニューの構成にしても なんか いまいちと思われる方は 微調整をして隙のない きりりとしたサイトにカスタマイズしましょう もう少しと解説を追加しました
    サイトメニューをブログみたいにCSS指定カスタマイズ
    シリウスのサイトメニューをリバースに変更したら次はワールドプレスやブログのようなメニュースタイルへCSS指定でカスタマイズしましょう