念願の「スマホのメニューバー」を設置^^(はてなPRO)2019-03-02念願の「スマホのメニューバー」を設置^^(はてなPRO)このブログについて以前からやろうと思っていながら、なかなか腰が上がらなかったことを、今日ついにやりました!それは、ボタン式の「スマホのメニューバー」の設置です。私のブログはカテゴリが10個あり、すべてにメニューボタンを作成すると、ボタンが多くなってしまうため、どのようにしようか迷っていました。ドロップダウン形式も考えましたが、やはりワンクリックでページに飛べる楽さを重視し、最終的にボタン式メニューの採用を決断しました。メニューは4つにまとめ、それぞれのボタンにあてた固定ページに飛び、そこから各カテゴリページに飛ぶ構成としました。同じようなメニューの作成を考えている方は、以下に私の行った方法を記載しましたので、お役にたつと幸いです。いっても、コードはもちろん、他の方が公開して頂いているものをコピペさせて頂きました。_)mなお、「固定ページの作成」と「スマホページ、タイトル下のHTML」記述が、はてなブログPROしか対応していないようでしたので、PROの方限定の方法になってしまします。下記の参考記事に記載されている、【HTMLコード】【CSSコード】を、下図の赤枠の箇所に張り付けるだけです。www.bambi.proただし、参考記事はPCを対象にしたものなので、スマホでは1点だけ注意点があります。スマホのページの設定では、CSSを記載する箇所が設けられていないため、【CSSコード】は、<style>タグ内に張り付けて下さい。私の場合、ページ送りでメニューが流れても良いと考えていたので、【CSSコード】の11行目(空行除く)の「position:fixed;」は削除しました。あとは、自分のページに合わせて、メニュータイトルや、リンク先を設定していくだけです。次に行うことは、メニューボタンからリンクする固定ページの作成です。メニューボタンと同じ数の固定ページを作成し、そこにカテゴリページへのリンクを貼れば完成です!(下図に例を示します)固定ページに各カテゴリの説明なども書けるので、発信したい情報をより明確にできるという点でも、作成して良かったと感じました。まとめスマホのメニューバーと固定ページの作成により、サイト内を分かりやすくナビゲーションできるようになりました。メニューバーを設置したので、ワインに興味がある方、気になる記事をひとつでも読んで頂けると幸いです。ピノノワール」を購入♪プライバシーポリシーhttps://www.wine-cheese.jp/privacy-policyはてなブログをはじめよう!wine_cheeseさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。