念願の「スマホのメニューバー」を設置^^(はてなPRO)

以前からやろうと思っていながら、なかなか腰が上がらなかったことを、今日ついにやりました!

それは、ボタン式の「スマホのメニューバー」の設置です。

スマホのメニューバー設置

私のブログはカテゴリが10個あり、すべてにメニューボタンを作成すると、ボタンが多くなってしまうため、どのようにしようか迷っていました。。。

ドロップダウン形式も考えましたが、やはりワンクリックでページに飛べる楽さを重視し、最終的にボタン式メニューの採用を決断しました。

メニューは4つにまとめ、それぞれのボタンにあてた固定ページに飛び、そこから各カテゴリページに飛ぶ構成としました。

各メニューへのカテゴリ割り当て

同じようなメニューの作成を考えている方は、以下に私の行った方法を記載しましたので、お役にたつと幸いです。

といっても、コードはもちろん、他の方が公開して頂いているものをコピペさせて頂きました。笑 

参考にさせて頂いた「元CAバンビ」さん、ありがとうございましたm(_ _)m

なお、「固定ページの作成」と「スマホページ、タイトル下のHTML」記述が、はてなブログPROしか対応していないようでしたので、PROの方限定の方法になってしまします。申し訳ありません。(> <)

スマホの固定メニュー作成

下記の参考記事に記載されている、【HTMLコード】【CSSコード】を、下図の赤枠の箇所に張り付けるだけです。

www.bambi.pro

コードの貼り付け箇所

ただし、参考記事はPCを対象にしたものなので、スマホでは1点だけ注意点があります。

スマホのページの設定では、CSSを記載する箇所が設けられていないため、【CSSコード】は、<style>タグ内に張り付けて下さい。

CSSコードはstyleタグ内に貼り付け

また、私の場合、ページ送りでメニューが流れても良いと考えていたので、【CSSコード】の11行目(空行除く)の「position:fixed;」は削除しました。

あとは、自分のページに合わせて、メニュータイトルや、リンク先を設定していくだけです。

「元CAバンビ」さんの記事が大変分かりやすく、おかげ様で思っていたより全く時間がかからずにできました!

メニューボタンのリンク先固定ページの作成

次に行うことは、メニューボタンからリンクする固定ページの作成です。

メニューボタンと同じ数の固定ページを作成し、そこにカテゴリページへのリンクを貼れば完成です!(下図に例を示します)

固定ページの作成例

固定ページに各カテゴリの説明なども書けるので、発信したい情報をより明確にできるという点でも、作成して良かったと感じました。

まとめ

スマホのメニューバーと固定ページの作成により、サイト内を分かりやすくナビゲーションできるようになりました。

また、せっかくメニューバーを設置したので、ワインに興味がある方、気になる記事をひとつでも読んで頂けると幸いです。笑