サイトマップ
スマホの画面サイズで出現するナビボタン作成手順
シリウスサイトをスマホで閲覧した際、小さなレイアウトに合わせ
サイト最上部に専用プルダウン形式のページメニュー、ナビボタンを
取り付ける方法の解説となります
そこで大変申し訳ありませんが、
解説はシリウスのデフォルトテンプレート専用で、当サイトの解説にある
レスポンシブ構造を組み込んでいる場合のみ対応されるものと
ご理解ください..
（シリウス配布のレスポンシブTPではなく、デフォルト改造バージョンのみ）
シリウスレスポンシブウェブデザインテンプレート設定の
解説はこちら.....
シリウスのデフォルトで初期段階から用意されるレスポンシブテンプレートは
スマホ対応コードが備えあり、ウェブ上で多く使われるデザイン
ハンバーガーメニューともいわれる以下の横３ラインボタンが表示されます
で、カスタムは不要です
アイフォン設定では使えるか？ですが、レスポンシブ構造ではないので
表示はできますが、その他がレイアウトエラーで対応不可
どのようなスタイルか？ですが、当ページをパソコン画面で見ているなら
狭めてください
670pxサイズから、グローバルナビが消えてサイト最上部に専用の
メニューが現れるはずです
カーソルを当てるとプルプルるん...しますね...
参考画像
注釈
多くのデバイスで使われるハンバーガーメニューですが、マイクロソフトか
グーグルサンかが、最初に使われたそうで、その後みなさんが追従した
スタイルで、ウェブ上の定番ということではないそうです
スマホでは表さなければならないスマホメニューのスタイルとは言えない
まれに独自のナビボタンもお見かけはします
どうしても、世間一般で使われるナビボタンといわれる場合は
ネット検索でコードをお求め下さい
当サイト解説のレスポンシブ構造を組み込んでいる場合、
設定にさほどの面倒はありません
HTMLコード CSS追加で終了します
取り付けには、二つの反映手段があります
一つはHTMLrテンプレートに、HTMLコードを置く場合で
トップは一つのページで反映
カテゴリーに置けば、カテゴリーページ全体で反映
エントリーは、やはり全体で反映とメニュー項目を3つに分けられます
もう一つは、エントリーページのみスタイルの割り込みで指定すれば
そのページだけ個別に反映させることもできます
では、HTMLを確認してください
トップ、カテゴリー、エントリーと分ける場合はリンクメニューを書き換えてください
ＨＴＭＬ内に記述の追加
ＨＴＭＬテンプレートでは、<body>直下に置きます
<body>
ここから
<div id="normalnav5" class="drop">
<li><a href="#"><span style="color:#FF0A0A">MENU●●●●</span></a>
<ul>
<li><a href="#">submenusubmenusubmenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</div>
ここまで
メニューの書き換え例
<li><a href="<% pageDepth %>横にスライドするナビゲーション/entry483.html">ナビボタン</a></li>
貼り付けよう記述の
ｉｄは、スタイルシートに追加する気ＣＳＳも同じ
メニューテキストは5つ 追加する場合は、行を追加
一番上のあかまるは、
ｐｃ操作で、くろまるを出して変換して、シリウス機能で色図けしたものです
ご自身でカスタマイズする場合は、タイトルでも その他でも趣向を凝らして
オリジナルで入れ替えてください
参考
画像でナビボタンを表示
横３本ライン、ハンバーガーメニューの画像を赤丸と入れ替え表示も可能です
ただし、背景もCSSで色合わせしないと見栄えがよろしくありません
ハンバーガーメニューの画像は、ウェブ上で探すか、シリウスレスポンシブ
テンプレートを表示させ、画像を切り取ります
スタイルシート追加記述
次にスタイルシート記述ですが、解かりやすいとこに貼り付けてください
スマホサイズ670pxではグローバルメニューが
非表示となり、切替わりで専用メニューが現れます
グローバルメニューを最初から設定していないサイトの場合でも
スマホサイズから出現となります
スマホの横サイズ 670pxからの作動にしていますが、位置の指定に
こだわりがある場合は数値を変えてください
ここから
@media(max-width:670px){
.drop{
display: block;
}
/*スマホではナビボタンをサイト上部で表示する*/
.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 10px;
padding: 0;
top: 0;
position: absolute;
top: 0;
}
.drop:before, .dropmenu:after{
content: "";
display: table;
}
.drop:after{
clear: both;
}
.drop li{
position: relative;
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.drop li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #999999;
color: #FFF;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.drop li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.drop li ul li{
width: 100%;
}
.drop li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #666666;
text-align: left;
}
.drop li:hover > a{
background: FF4EF6;
}
.drop li a:hover{
background: #555555;
}
/*作動スタイルの指定項目*/
#normalnav5 li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#normalnav5 li:hover ul li{
overflow: visible;
height: 38px;
}
/*スマホサイズ670ではＧメニューを非表示*/
#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
top: 200px;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
display: none;
}
#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;
<% topMenuWidth %>
text-align: center;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
padding-bottom:3px;
display: none;
}
}
ここまで
カラーは＃コードを書き換えてください
これだけで動くはずです
エントリーページでは
エントリーページは、特殊構築ですので二つの表示法があります
一つは上記工程をカテゴリーで終了してエントリーページのみ
ページごとにコンテンツに合わせ個別表示する
もう一つは、上記工程をエントリーページまで指定して置き
特にこのページだけはメニューを変えたいなどとした場合、単独の
メニューにする...desu
エントリーだけ、ページごとに個別表示する場合は、
上記の工程は、カテゴリーテンプレートまでにしてください
HTMLは記事内 HTMLテンプレートではありません
記事を書くとこ
のどこか？邪魔にならないとこに張り付け
CSS記載は、スタイルの割り込みに張り付けてください
で、終了
次に
トップ解説でいうHTMLテンプレートでエントリーまで指定して
特定ページのみ異なるメニューテキストを表示する場合、
実際は全体表示のメニューをそのページだけ表示させなくする
CSS指定 display: none;が必要かと理解していたのですが
スタイルシート割り込みにCSS追加、記事内にHTMLと
単に上の手順で、単独で追加編集すればそのページだけ優先で
反映されます
...ので、何ら面倒なくカスタム可できます
最後に
レスポンシブ構造を組み入れていないサイトに取り入れた際でも
反映はしますが、全体のレイアウトがうまく適合しません
...念のため
スポンサー広告
スマホの画面にフィットするナビボタン作成方法
シリウスサイトをスマホで閲覧した際、小さなレイアウトに合わせサイト最上部に専用プルダウン形式のページメニュー、ナビボタンを取り付ける方法の解説となりますそこで大変申し訳ありませんが、解説はシリウスのデフォルトテンプレート専用で、当サイトの解説にあるレスポンシブ構造を組み込んでいる場合のみ対応されるも...
ページトップ
スマホの画面にフィットするナビボタン作成方法
横にスライドするナビゲーション｜スマートフォン対応
シリウスカスタマイズTOP
