今回はBloggerで人気のテンプレート「QooQ」のナビゲーションバーのスマホ画面での表記を変える方法を紹介しています！
デフォルトのナビゲーションバーは、スマホ画面から見ると分かりにくくなっています。
ブログに来て下さった読者さんに、ナビゲーションバーが伝わりやすいよう、表記を変更してみました。
カスタマイズ前
 |
| デフォルトのナビゲーションバー |
↓
カスタマイズ後
 |
| カスタマイズ（文字変更）したナビゲーションバー |
※文字はお好きな文字に変えられます！
HTMLタグをいじりますが、文字を変えるだけなのでとても簡単に出来ます！
ブログ初心者さんでも気軽にカスタマイズ出来る３ステップの内容となっています。
■QooQのナビゲーションバー
＊PCから見たナビゲーションバー
 |
| ※当ブログはナビゲーションバーをヘッダー下にカスタマイズ済の状態です。 |
パソコンから見ると、ナビゲーションバーにはリンクが表示されていて、特に分かりにくさも感じないデザインとなっています。
＊スマホから見たナビゲーションバー
スマホで見るとナビゲーションバーはこのような状態です。
【＝】の表示なので、気付かれにくいし分かりにくいです。
折りたたみ式になっていて、タップすると開きます。
分かりやすいように、文字表記に変更していきたいと思います。
■カスタマイズの方法
バックアップを忘れずに！
HTMLをいじるので、まずはテンプレートのバックアップを作成します。
.png "バックアップの場所") |
| テーマ→▼→バックアップ |
今回のカスタマイズは簡単ですが、万一の場合に備えてバックアップをとっておきましょう！
１）ナビゲーションバーの記述を探す
.png "HTML編集画面への行き方") |
テーマ→▼→HTMLを編集 |
テンプレートの編集画面を表示させて、今回カスタマイズするナビゲーションバーの記述を探します。
.png "ナビゲーションバーのHTML")
<div id='navigation'>が目印です。
テンプレートを何もカスタマイズしていない状態だと、大体650行前後にあるかと思います。
→検索で簡単に見つけられる！
.png "検索している画面")
「Ctrl＋F」を同時に押すと、検索窓が出てきます！
<div id='navigation'>を入力して検索すると、すぐ見つかるのでおすすめです(^O^)
２）文字を変える
_02.png "文字変更場所")
<label for='navigation-button' id='navigation-label'>=</label>
この「＝」を消して、好きな文字を入力すればOKです！私は「MENU」と入力してみました。
デフォルトの「＝」表記よりも、伝わりやすいと思います！
Font Awesomeを登録されてる方は「 」もメニューアイコンぽくなっておすすめです！
３）保存
保存ボタンを押してカスタマイズ終了です！これで実際にスマホ画面から見ると表記が変わっていると思いますので、確認してみてくださいねっ(*^_^*)
■おわりに
今回は「QooQ」のナビゲーションバーの表記を変える方法をご紹介させて頂きました。今回紹介したカスタマイズ方法は、文字部分を変えるだけ！
簡単なので、ぜひ挑戦してみてください！
0 件のコメント:
コメントを投稿