• MENU ●●●●
  • 横にスライドするナビゲーション|スマートフォン対応


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    スポンサー広告

    当該サイトコンテンツ関連記事

    横にスライドするナビゲーション構築手順

    シリウスサイトをレスポンシブ化としていれば、スマートフォンからの
    閲覧に際し、それはそれなりに記事も読めるし画像も理解できるでしょう

     

    ですが、レスポンシブサイトであれ、シリウス機能iphone設定であっても
    2カラム 3カラムともサイドメニューはサイト巻末へ大移動

     

     

    ショート記事なら巻末へすぐにたどり着くはずが

     

    ロングコンテンツですと後方移動もめんどうかな~

     

    グローバルメニューも小さくなって見ずらいし

     

    そんな場合の対応策として、ブログなどに新しく?
    ...かどうかは知りませんが、スマートフォン閲覧の際、

     

    小さな画面用のトップ位置に表示されるメニューが、
    HTML5 CSS3構築サイトを含めよく見かけます

     

    パソコン画面を縮小するとサイト常備に置かれるナビゲーションが
    画面首相に従い形を変える

     

    小さな画面用の形に切り替わる..ですね

     

     

    実際の使いかっては?...ですが?

     

    不便は感じられませんでした

     

     

    まずは、作動を確認してください
    リンクは貼ってません

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    作動状況はいかがでしたか?

     

    解説という事情で、表示メニューはシリウスの記事内にコードは
    置いておりますので上記位置に表示されるわけですが、

     

    視覚効果を下げてしまいますね

     

    HTML5 CSS3サイトなどの一カラムでは、サイトの左右どちらかの
    背景位置に上記メニューを置いて、レスポンシブ作動の指定範囲で
    サイトの上部に移動するという手法も備われている様子

     

    どのように利用するかはまちまちで固定される範囲ではありません

     

    で、すべてに対応する解説などできるはずもなく

     

     

    今回は、通常のシリウスサイトをスマートフォンサイズで閲覧の際

     

    一番良い見え方にする...という判断で進めます

     

     

    スマートフォンでのみ表示する

     

    という指定をします

     

     

     

    取り付けが面倒そう?..かと理解する方もおられるかと思いますが
    jquery等使用せずです

     

    当サイトの解説に従い、CSS記述をスタイルシートで2箇所

     

    HTML内に1箇所配置で完了します

     

     

    即座にプレビューでもご確認できますが、テキスト書き換え
    およびリンク貼り付けは手動作業になります

     

     

    カスタマイズに関しては、このままでも使えますが

     

    好みに合わせるなら数値変更 カラーコード変更でほぼ対応できます

     

     

    説明は、当サイトでご案内するレスポンシブ構造サイトであることを
    前提にします

     

    シリウスiphone設定実行サイトには適しておりません

     

    HTMLコードの配置

     

     

    記事内に置くという方は、記事内の一番上

     

    HTML内に置く場合は、邪魔にならないところ...サイト巻末の外

     

    トップ カテゴリー エントリー以降は、自己判断で願います

     

    <% searchTag | str_replace(<!-- ★comment★ -->,サイト内検索:) | tag_insert(div id="searchbox") %>

     

    </div>

     

    </body>

     

    ここに、置いてください
    </html>

     

    入れ込みコード
    ここから
    <nav class="sidenav">
    <ul class="main-buttons">
    <li>
    <i class="fa fa-circle fa-2x"></i>
    <span style="font-size:18px;"><span style="color:#FF0A0A">●</span></span>siriuserer親
    <ul class="hidden">
    <li><span style="color:#FF0A0A">●</span>siriuser子</li>
    <li><span style="color:#FF0A0A">●</span>siriusu子 </li>
    <li>you sirius</li>
    <li>your siriuson</li>
    </ul>
    </li>
    <li>
    <i class="fa fa-circle fa-2x"></i>
    <span style="font-size:18px;"><span style="color:#FF0A0A">●</span></span> siriuserbr
    <ul class="hidden">
    <li>Donk</li>
    <li>obama</li>
    <li>abenomikusu</li>
    <li>Wordpures</li>
    <li>んhk</li>
    </ul>
    </li>
    <li>
    <i class="fa fa-circle fa-2x"></i>
    <span style="font-size:18px;"><span style="color:#FF0A0A">●</span></span>シリウス
    <ul class="hidden">
    <li>england</li>
    <li>doit</li>
    <li>FX</li>
    </ul>
    </li>
    </ul>
    </nav>
    ここまで

     

     

    テキストは、書き換えてください

     

     

     

    スタイルシートに置く記述

     

    スマートフォンサイトとして表示されるよう

     

    スタイルシートでスマートフォンサイズを指定した
    @media 内に以下のCSSを入れ込んでください

     

     

    /* 横スライド */

     

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

     

    body#container.sidenav {
    top:0; スマホサイズでサイト上部位置の表示指定
    margin: 0px;
    padding: 0px;
    }

     

    .sidenav {
    position: absolute;
    width: 320px;
    background-color: #1E2027;
    height: 300px;
    }
    .sidenav .main-buttons {
    list-style-type: none;
    margin: 0px 0;
    padding:0;
    color: #fff;
    }
    .sidenav .main-buttons li {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    }
    .sidenav .main-buttons > li {
    padding: 15px 32px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .sidenav .main-buttons > li .fa {
    position: absolute;

     

    left: 2px;
    color: #414655;
    }
    .sidenav .main-buttons > li:hover, .sidenav .main-buttons > li:active, .sidenav .main-buttons > li:focus {
    background-color: #292c35;
    cursor: pointer;
    }
    .sidenav .main-buttons > li:hover .hidden, .sidenav .main-buttons > li:active .hidden, .sidenav .main-buttons > li:focus .hidden {
    width: 320px;
    }

     

     

    .hidden {
    width: 0;
    height: 100%;
    padding: 0px 0;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    list-style-type: none;
    background-color: #292c35;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    height: 300px;
    }

     

    .hidden li {
    padding: 16px 24px;
    }
    .hidden li:hover, .hidden li:active, .hidden li:focus {
    background-color: #BBBBBB;
    }

     

     

    body {
    background-color: #caccd6;
    line-height: 30px;
    }

     

     

    html, body {
    height: 100%;

     

    }

     

    ここまで

     

     

    以上が、レスポンシブ構造でスマートフォンサイズでは、
    サイトの上部位置に出現する指定となります

     

     

     

     

    次に、スマートフォン以上でもレスポンシブ化する記述を指定している際は、

     

    以下トップの@mediaコード
    最下部の } を外して、残るコードを入れ込んでください

     

     

    スマートフォン以上のサイズでレスポンシブ化を実行していない場合は
    以下記述をスタイルシートの巻末においてください

     

     

     

    @media screen and (min-width: 769px) and (max-width: 2499px) {

     

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

     

     

    .sidenav {
    display: none;
     PCでは非表示指定

     

    .sidenav {
    position: absolute;
    width: 320px;
    background-color: #1E2027;
    height: 300px;
    }
    .sidenav .main-buttons {
    list-style-type: none;
    margin: 0px 0;
    padding:0;
    color: #fff;

     

    }
    .sidenav .main-buttons li {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    }
    .sidenav .main-buttons > li {
    padding: 15px 32px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .sidenav .main-buttons > li .fa {
    position: absolute;

     

    left: 2px;
    color: #414655;
    }
    .sidenav .main-buttons > li:hover, .sidenav .main-buttons > li:active, .sidenav .main-buttons > li:focus {
    background-color: #292c35;
    cursor: pointer;
    }
    .sidenav .main-buttons > li:hover .hidden, .sidenav .main-buttons > li:active .hidden, .sidenav .main-buttons > li:focus .hidden {
    width: 320px;
    }

     

     

     

    .hidden {
    width: 0;
    height: 100%;
    padding: 0px 0;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    list-style-type: none;
    background-color: #292c35;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    height: 300px;
    }

     

    .hidden li {
    padding: 16px 24px;
    }
    .hidden li:hover, .hidden li:active, .hidden li:focus {
    background-color: #BBBBBB;
    }

     

     

     

    body {
    background-color: #caccd6;
    line-height: 30px;
    }

     

     

     

    html, body {
    height: 100%;
    }
    }
    }

     

    ここまで

     

     

    指定が完了しますとプレビューでご確認いただけます

     

     

    新バージョンを追加してます

     

    スタイルは、当サイト画面を狭めてください
    するとグローバルナビが、スマホサイズに合わせ形が変化します

     

    詳細は巻末記事をご確認ください

     

     

     

    横にスライドするナビゲーション|スマートフォン対応記事一覧

    スマホの画面にフィットするナビボタン作成方法

    シリウスサイトをスマホで閲覧した際、小さなレイアウトに合わせサイト最上部に専用プルダウン形式のページメニュー、ナビボタンを取り付ける方法の解説となりますそこで大変申し訳ありませんが、解説はシリウスのデフォルトテンプレート専用で、当サイトの解説にあるレスポンシブ構造を組み込んでいる場合のみ対応されるも...

    ≫続きを読む

     

     

     

     

    ページトップ
    横にスライドするナビゲーション|スマートフォン対応
    シリウスカスタマイズTOP

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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