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