年末から年始にかけて、スマホにボトムメニューを表示できるようにカスタマイズしていました。
ボトムメニューとは下記の赤丸で囲っている部分です。
私が参照したのはこちら
しかし、パソコンではボトムメニューが表示されるのに、なんどやってもスマホには表示されませんでした。
私は、スマホにボトムメニューを作るために３日くらい四苦八苦しました。
この記事は、私みたいな人のために作った記事です。
ぜひ、ボトムメニューをカスタマイズできるようにチャレンジしてください。
ボトムメニューがスマホには表示されない
まずは、ブログよりそのままコピペを行い、HTMLとCSSに入力します。
パソコンではボトムメニューは表示されました。
しかし、スマホで見るとボトムメニューは表示されないままです。
レスポンシブデザインに変更
色々、方法を確認したところ、レスポンシブデザインにするとパソコンと同じ画面になるということを知りました。
レスポンシブ ウェブ デザイン（レスポンシブ デザイン）とは、簡単に言うと、「機器や画面サイズに応じて、Webサイトを見やすく表示できるようにすること」です。
引用元レスポンシブ ウェブ デザインとは？～基本から作り方まで徹底解説～ | 株式会社パンタグラフ (pantograph.co.jp)
レスポンシブデザインにするには、ダッシュボードから入り、デザイン→スマホのアイコン→詳細設定からレスポンシブデザインにチェックを入れました。
ボトムメニューは表示できたが、文字が小さすぎて読みにくい
レスポンシブに変更し、スマホにボトムメニューができたのはよかったのですが、文字が小さすぎてブログが読みにくくなりました。
これでは、スマホで見た時にわざわざ文字を拡大しながら見ないといけません。
そして、そこまでしてこのブログを見てくれる人はいるでしょうか？
もう、読者の方が逃げていくのは目に見えてわかります（涙）
レスポンシブ対応のデザインを選ぶ
調べた結果、レスポンシブ対応デザインでないと、スマホ表示にはならないことが判明しました。
あと、レスポンシブデザインの部分をみるとこんな文言が
レスポンシブデザインのテーマを設定しているときのみ使用してください
と書いていました。
その後、現在選択中のテーマを確認する部分をポチって確認すると
※このデザインテーマはレスポンシブデザインに対応していません
と書いてありました。
そして、あっけなく解決。
レスポンシブ対応のデザインに変更後、無事にスマホにボトムメニュー表示させることが出来ました。
はてな運営さん、ネット情報はスマホで見る方が多いです。気に入ったデザインがあっても、レスポンシブデザインでないと便利にカスタマイズが出来ないので、ぜひぜひレスポンシブ対応できるようお願いします。
ということで、私がスマホにボトムメニューを作るお話でした。
まだまだ、いろいろとカスタマイズできるよう頑張っていこうと思います。
