サイトマップ
横にスライドするナビゲーション構築手順
シリウスサイトをレスポンシブ化としていれば、スマートフォンからの
閲覧に際し、それはそれなりに記事も読めるし画像も理解できるでしょう
ですが、レスポンシブサイトであれ、シリウス機能iphone設定であっても
2カラム 3カラムともサイドメニューはサイト巻末へ大移動
ショート記事なら巻末へすぐにたどり着くはずが
ロングコンテンツですと後方移動もめんどうかな～
グローバルメニューも小さくなって見ずらいし
そんな場合の対応策として、ブログなどに新しく？
...かどうかは知りませんが、スマートフォン閲覧の際、
小さな画面用のトップ位置に表示されるメニューが、
HTML5 CSS３構築サイトを含めよく見かけます
パソコン画面を縮小するとサイト常備に置かれるナビゲーションが
画面首相に従い形を変える
小さな画面用の形に切り替わる..ですね
実際の使いかっては？...ですが？
不便は感じられませんでした
まずは、作動を確認してください
リンクは貼ってません
作動状況はいかがでしたか？
解説という事情で、表示メニューはシリウスの記事内にコードは
置いておりますので上記位置に表示されるわけですが、
視覚効果を下げてしまいますね
HTML5 CSS３サイトなどの一カラムでは、サイトの左右どちらかの
背景位置に上記メニューを置いて、レスポンシブ作動の指定範囲で
サイトの上部に移動するという手法も備われている様子
どのように利用するかはまちまちで固定される範囲ではありません
で、すべてに対応する解説などできるはずもなく
今回は、通常のシリウスサイトをスマートフォンサイズで閲覧の際
一番良い見え方にする...という判断で進めます
スマートフォンでのみ表示する
という指定をします
取り付けが面倒そう？..かと理解する方もおられるかと思いますが
jquery等使用せずです
当サイトの解説に従い、ＣＳＳ記述をスタイルシートで2箇所
HTML内に１箇所配置で完了します
即座にプレビューでもご確認できますが、テキスト書き換え
およびリンク貼り付けは手動作業になります
カスタマイズに関しては、このままでも使えますが
好みに合わせるなら数値変更 カラーコード変更でほぼ対応できます
説明は、当サイトでご案内するレスポンシブ構造サイトであることを
前提にします
シリウス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>んｈｋ</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%;
}
}
}
ここまで
指定が完了しますとプレビューでご確認いただけます
新バージョンを追加してます
スタイルは、当サイト画面を狭めてください
するとグローバルナビが、スマホサイズに合わせ形が変化します
詳細は巻末記事をご確認ください
シリウスサイトをスマホで閲覧した際、小さなレイアウトに合わせサイト最上部に専用プルダウン形式のページメニュー、ナビボタンを取り付ける方法の解説となりますそこで大変申し訳ありませんが、解説はシリウスのデフォルトテンプレート専用で、当サイトの解説にあるレスポンシブ構造を組み込んでいる場合のみ対応されるものとご理解ください..（シリウス配布のレスポンシブTPではなく、デフォルト改造バージョンのみ）シリウ...