[ 解決済 ] ハンバーガーメニューで表示されるナビゲーションのリンクについて
[ 解決済 ] ハンバーガーメニューで表示されるナビゲーションのリンクについて
- このトピックには10件の返信、3人の参加者があり、最後に
により1ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.6.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.26.4（Lightning Childバージョン: 0.5.1）■ Pro Unit のバージョン
0.27.1■ スキンの種類
Origin III■ 期待する動作
ハンバーガーメニューの中のナビゲーションについて、子ページだけで構成されているメニューは、行の枠内どこをタップしても、アコーディオンが下りてくるようにしたい。また、一行の高さが狭くて指を当てづらいので、もっと幅を広くしたり、文字を大きくしたい。
■ 自分で試した事
ネットでカスタマイズ方法をさがしましたが、見つけられませんでした。■ 症状が発生するブラウザ
safari（iPhone）■ 実際の症状
ハンバーガーメニューで表示されるメニューの一覧表ですが、
子ページが無い固定ページの行だと、枠内どこをタップしてもちゃんとそのページに飛ぶのですが、子ページがある行だと、右端の「V」の真上に指を当てないと、アコーディオンが下りてきません。
少しでもずれると、トップページに戻ってしまいます。
範囲がとても小さいので、目の悪い人や指の太い人だと、うまく「V」の上に指を当てられないし、コツが要るようです。子ページだけで構成されているメニューは、メニューの行の枠内どこをタップしても、アコーディオンが下りてくるようにしたいです。
また、一行の高さが狭くて指を当てづらいので、もっと幅を広くしたり、文字を大きくしたいです。
※昨日10月15日に「スマホの時に、ハンバーガーメニューで展開するメニュー案内について」という質問が上がったので、回答を期待していたのですが、自己解決で「解決済」となっていたため、同じような内容ですが質問させていただきました。
よろしくお願いいたします。
石川様
いつもお世話になっております。
ご返信ありがとうございます。サンプルサイトの場合、
例えば
「サービス案内」（親・固定ページあり）
「サービスの流れ」（子ページ）
「よくあるご質問」（子ページ）という構成になっていて、
「サービス案内」の文字（および余白）の部分をタップすると親の固定ページに飛び、
右端の「V」をタップすれば子ページに飛ぶようになっています。私の制作しているサイトの場合、
「診療案内」（親・固定ページなし）
「一般診療」（子ページ）
「小児歯科」（子ページ）のように、メニューの名前のページ（親）が存在しなくて、
カテゴリー分けした子ページのみになっており、
「診療案内」の行の「V」の真上をうまくタップしないと、アコーディオンが下りてこなくて、
少しでも「診療案内（＋余白部分）に触れてしまうと、メニューが閉じてしまいます。※最初の質問時、“「V」以外に触れるとトップページに飛ぶ”とお伝えしましたが、どこからもトップページに飛ぶわけではなく、開いていたページに戻る（ハンバーガーメニューが閉じてしまう）という状況でした。すみません。
なので改善したい点は、「診療案内」（余白部分と「V」も含め）の行のどこをタップしても、
アコーディオンが下りてくるようにしたいです。アコーディオンが下りて表示される子ページ、および子ページのない親ページのメニューは、
行全てがそのページにリンクされています。
アコーディオンを表示させるのも、そのようにしたいです。あと、行自体も高さを広げ、文字を大きくしたいです。
若者から年配の人まで見ていただきたい医療サイトなので、
アクセシビリティに対応できるよう、お力添えいただけると有難いです。よろしくお願いいたします。
「診療案内」（親・固定ページなし）
「一般診療」（子ページ）
「小児歯科」（子ページ）のように、メニューの名前のページ（親）が存在しなくて、
カテゴリー分けした子ページのみになっており、すみません、ちょっとよくわかりません。
一般診療や小児歯科は固定ページとしては親子関係に設定していないという事ですか？
診療案内 という項目はメニュー項目としては作ったけれどもどこにもリンクしないという事でしょうか？
一般診療 や 小児歯科 は固定ページではなく 投稿の”カテゴリー”という事でしょうか？該当サイトのURLか同じ症状を再現したテストサイトのURLなどがあると回答しやすいです。
よろしくお願いいたします。
理解できました。
（診療案内 にリンク先は指定していないけれども）
「診療案内」（余白部分と「V」も含め）の行のどこをタップしても、
アコーディオンが下りてくるようにしたいです。恐れ入りますが結論から言うと無理です。
親メニューをタップしたら親メニューが指定したページに遷移するという仕様の前提です。
なぜこうなっているかというと
文字をタップ → そのページに移動する、
展開ボタンをタップ → サブメニューが展開する、という方が、見たままで迷わないのでアクセシビリティとして自然だからです
親メニューをタップした時にそのページに直接遷移か、
子メニューを展開するかを設定項目を作ったとしても、
親メニューをタップした時にそのページに遷移する場合と
子メニューが展開する場合があってはユーザーが混乱するのでアクセシビリティとして良くない状態になります。そういった事も踏まえて現状の仕様としています。
普通にメニューには親ページとなる固定ページを割り当てる
その親メニューに割り当てた固定ページに 子ページ一覧ブロックなど配置するというのがサイト構成として自然で検索エンジンなどにも正しく階層を認識されるので、そちらの方がおすすめです。
ちなみに「無理です」と記載しましたが、100%無理ではありません。
ただ、大掛かりなカスタマイズになりますので、サポート対象外となり、該当のカスタマイズを業者様に依頼したとしても金額が大きくなるので、費用対効果として現実的ではないという認識です。よろしくお願いいたします。
「診療案内」（余白部分と「V」も含め）の行のどこをタップしても、
アコーディオンが下りてくるようにしたいです。診療案内ページを経由せずに、閲覧者がすばやく個々の診療科目の案内ページに辿り着けるようにしたい、ということが目的なのだと理解しました。
モバイルナビ上部 または モバイルナビ下部 のウィジェットにボタンを置く、ってのはいかがでしょうか？
石川様 対馬様
ご返信をありがとうございます。
解釈が難しい問合せの文章になってしまったようで、申し訳ありません。対馬様のおっしゃる通りで、閲覧者がメニューからダイレクトに診療科目の案内ページに飛べるようにしたかったのです。
新しいご提案をありがとうございます。診療科目はぜんぶで11科目あり、トップページ内にはそれぞれの固定ページに飛べるボタンを11個設置しているのですが、メニューの方から飛ぶには「診療科目」という名前でまとめたボタンの中にアコーディオンで入れ込む、という方法をとっていました。
また、モバイル下部には「スクロールすると横からでてくるCTA」で電話番号を固定表示させているため、上部に全ての科目のボタンを固定で設置するのも画面が狭くなるので難しく…。
アコーディオンのリンクの範囲を広げるのが、大がかりなカスタマイズになるとは思っていなかったので、残念です。
ハンバーガーメニュー内の文字を大きく、行の高さを広くすることも難しいでしょうか？
開発者ツールで調べて、CSSで背景色を変えることはできたのですが、行の高さの調整と文字サイズを反映させることができませんでした（お恥ずかしながら初心者です）。
ご教授いただけると有難いです。
“行間”とは文字の余白の事ですか？
改行があるときの行間が狭いという意味ですか？.vk-mobile-nav nav ul li a { padding: 1em .7em; font-size:16px; } .vk-mobile-nav .vk-menu-acc .acc-btn { top:14px; }モバイル下部には「スクロールすると横からでてくるCTA」で電話番号を固定表示させているため、上部に全ての科目のボタンを固定で設置するのも画面が狭くなるので難しく…。
モバイルナビ上部ウィジェットは固定表示ではなく、ハンバーガーボタンをタップするとハンバーガーメニューの上に表示されますので、画面が狭くなるという心配はありません。
それでも11個のボタンは多いので、モバイルナビ上部ウィジェットにアコーディオンブロックを置くやり方がいいかもしれません。
石川様 対馬様
ご返答をありがとうございます！石川様にご教示いただいたCSSで、サイズの変更ができました。
また、対馬様のご提案下さった方法を参考に、
ナビメニューの中身をぜんぶVKアコーディオンで作り変えることにしました。ナビメニューの中身をすべてウィジェットだけで構成することが出来なかったので、
一番上の「home」だけメニューに残し、
その下に「モバイルナビ下部ウィジェット」で、残りの項目を作成する方法をとりました。「home」は石川様にご教示いただいたCSSを参考に、
サイズや文字位置などを調整し、ウィジェットのボタンと統一させました。ボタン間の隙間がまだ調整できずにいますが（隙間広すぎ…）、
「親ボタン（診療案内）のどこをタップしても、子メニューが下りてくる」という目的は達成できました。でもSEO対策としては、このようなやり方は、あまり良くないのでしょうか…。
対馬様が添付してくださったサンプル画像が、ものすごく有難かったです。
すみずみまで表示を見て、何を使って、どこで調整できるのか、理解することができました。
ご親切に作成して下さって、本当にありがとうございます。便利なVKブロック類も、まだ把握しきれていないので、教えていただいてとても助かりました。
WordPressでの本格的なサイト制作の1本目で、奮闘しています。
また質問させていただくと思います。
どうぞよろしくお願いいたします。
- このトピックに返信するにはログインが必要です。
