こんにちは！ HARU（ @HARU ）です。
Blogger のテンプレートである QooQ のナビゲーションバーについてカスタマイズしてみました。
- ナビゲーションバーの位置変更
- ナビゲーションバーの位置固定
- 検索ボックスをナビゲーションバーに入れる
- スマホ表示用のナビゲーションバーカスタマイズ
今回のカスタマイズをするにあたっては特に、ふじやん。さんのサイト（ ふじろっく ） で紹介されているカスタマイズ方法を参考にさせて頂きました！
その理想的なナビゲーションに加え、スマホ表示時のナビゲーションバーをクリックしやすくカスタマイズしてみました。
よかったら参考にしてみてください。
テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。
不安な方は以下の関連記事を参照してください。
ナビゲーションバーの位置変更
デフォルト状態だと画面上、一番上に設置されるナビゲーションバーをブログタイトルの下に設置します。
（１）以下のコードを検索します
<div id='navigation'>（２）<div id='navigation'> から対応の </div> までを切り取ります
QooQ のデフォルトであれば、</div> は <div id='header'> の直上にあります。
<!-- 切り取り範囲 ココから -->
<div id='navigation'>
<!-- （省略） -->
</div>
<!-- 切り取り範囲 ココまで -->
<div id='header'>
（３）先ほど切り取ったコードを <div id='header'> に対応した </div> の直下に貼り付けます
<div id='header'>
<!-- （省略） -->
</div>
<!-- 以下に先ほど切り取ったコードを貼り付ける -->
<!-- 切り取り範囲 ココから -->
<div id='navigation'>
<!-- （省略） -->
</div>
<!-- 切り取り範囲 ココまで -->
ナビゲーションバーの位置固定
ページがスクロールされても、ナビゲーションバーが上部で固定するようにします。
CSS 変更
既存の CSS ( #navigation ) の変更を行います。
#navigation{
padding: .2em 0 .2em 0;
background: $(brand.subcolor);
color: $(brand.subfont);
position: sticky; /* 追記 */
top: 0; /* 追記 */
z-index: 999; /* 追記 */
}
ナビゲーションバーの位置固定に伴うページ内リンクの調整
ナビゲーションバーの位置を固定することにより、ページ内リンク移動先で文字がナビゲーションバーに重なってしまうことが起こります。
そこでナビゲーションバーの分だけ、ページ内リンクの移動先をオフセットします。
ここでは２通りの調整方法を紹介しますが、オススメはページ内リンクをぬるっとスクロールさせる script の実装ついでに調整する方法です。
CSS を用いた調整方法
以下の CSS を追記し、リンク移動先のクラスに指定することで、移動先のオフセットが可能になります。
#single-content .anchor{
padding-top: 40px; /* オフセット量 */
}
使い方
<!-- ページ内リンク移動先の直上に以下を記載する -->
<div id="example" class="anchor"></div>
<!-- ページ内移動先指定場所 -->
id は任意のものを使って問題ありません。
ページ内リンクをぬるっと Script
ページ内リンクにスクロールアニメーションを追加するついでに、ナビゲーションバーの分だけオフセットさせることができます。
この方法を用いることで、リンク移動先にいちいち div タグを用いてオフセットさせる必要がなくなります。
詳しくは以下を確認してください。
検索ボックスをナビゲーションバーに入れる
検索ボックスをナビゲーションバー内に設置します。
検索ボックスの埋め込み
以下の手順で検索ボックスをナビゲーションバーに埋め込みます。
（１）以下のコードを検索します
<div id='navigation'>（２）以下のコードを <div id='navigation'> の下の <div class='widget-content'> の直下に記述します
<!--検索ボックス-->
<form action='/search' id='search-box-form' method='get'>
<input data-placeholder-end='' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' id='search-box-text' name='q' placeholder='ブログ内検索' type='text'/>
<button id='search-box-submit' title='検索' type='submit'><i class='fas fa-search'/></button>
</form>
イメージとしては <div class='widget-content'> と <ul> の間になります。
以下、記述場所のイメージです。
<div id='navigation'>
<!-- 省略 -->
<div class='widget-content'>
<!-- ココに先ほどのコードを記述する -->
<ul>
Font Awesome の導入
Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。
<link href='https://use.fontawesome.com/releases/v5.6.4/css/all.css' rel='stylesheet'/>CSS 追記
以下の CSS を Blogger テンプレートの CSS 欄に記述します。
#navigation の近くに記述すると、メンテナンス性もいいと思います。
#search-box-form {
float: right;
width: 200px;
background: #fff;
}
#search-box-form::placeholder {
color: #aaa;
}
#search-box-text {
width: 87%;
border: none;
outline: none;
font-size: 1em;
padding-left: 3px;
}
#search-box-submit {
color: #888;
font-size: 1em;
background: transparent;
position: absolute;
right: 0;
top: 3px;
border: none;
outline: 0;
}
#search-box-submit:hover {
cursor: pointer;
}
スマホ表示用のナビゲーションバーカスタマイズ
ナビゲーションアイコンの変更
スマホ表示時のナビゲーションアイコンを Font Awesome を使い見やすくします。
（１）以下のコードを検索します
<label for='navigation-button' id='navigation-label'>=</label>（２）先ほどのコードを以下のように変更します
<label for='navigation-button' id='navigation-label'><i class="fas fa-bars"></i></label>アイコンの調整
QooQ デフォルトであれば CSS ナビゲーション内の @media ( max-width : 768px )内 #navigation-label で大きさなどを変えられます。
以下に参考の CSS を示します。
@media ( max-width : 768px ) {
#navigation-label {
display: block;
text-align: center;
font-size: 22px; /* アイコンの大きさ */
padding: 2px 0 2px 20px; /* 余白などを調整 */
}
アイコン位置変更
ナビゲーションアイコンの位置を真ん中から右端に変更することで、アイコンの縦幅分を削減できます。
ナビゲーションを開閉するボタンの範囲は減りますが、スッキリした見た目になります。また、誤クリック防止にも繋がるでしょう。
以下、アイコン調整の CSS を含みます。
@media ( max-width : 768px ) {
#navigation-label {
display: block;
text-align: center;
font-size: 22px; /* アイコンの大きさ */
padding: 2px 0 2px 20px; /* 余白などを調整 */
float: right; /* 右に寄せる */
}
ナビゲーションリストを縦に並べる
QooQ デフォルトだと、文字の数によってボタンサイズを自動調整してくれます。
しかし当たり前ですが、一つ一つのボタンのサイズ感に違いがでます。
そこで表示するリスト内容が大きくても、小さくても縦並びになるように変更しました。
CSS 追記
以下の CSS をBlogger テンプレートの CSS 欄に記述します。
中身だけをナビゲーションの @media ( max-width : 768px )内に追記しても大丈夫です。
@media ( max-width : 768px ) {
#navigation-content li {
width: 100%;
}
#navigation-content li a {
padding: .5em .5em;
font-size: 14px;
}
}
ナビゲーションバーの微調整
検索ボックスをナビゲーションバー内右端に設置することにより、画面サイズによっては右側に余分な余白ができてしまうことがあります。
そこも調整して見やすいナビゲーションバーにします。
※ナビゲーションアイコンを右に寄せない場合、この調整は必要ありません。
CSS 削除
ナビゲーションの @media ( max-width : 768px )内の２つの CSS を削除します。
削除する CSS は以下の通りです。
#navigation-content{
display:none;
}
#navigation-button:checked ~ #navigation-content{
display: flex;
}
CSS 追記
以下の CSS をBlogger テンプレートの CSS 欄に記述します。
中身だけをナビゲーションの @media ( max-width : 768px )内に追記しても大丈夫です。
@media ( max-width : 768px ) {
#navigation-content{
height:0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease 0s;
}
#navigation-button:checked ~ #navigation-content{
opacity: 1;
height: auto;
}
}
スマホ版の CSS が反映されない
CSS は HTML 文上、下に書かれるほど優先度が上がる特性を持っています。
今回の場合、基本となるデザインの CSS より上に @media によるスマホ用 CSS が記載されているとその CSS は反映されません。
したがって以下のような順番に CSS を記載するようにしてください。
/** ナビゲーション **/
① 基本となるデザイン CSS
② スマホ用 CSS （ @media ）
スマホ用 CSS （ @media ）について
説明では QooQ のデフォルトである 768px 以下でスマホ用の CSS が反映されるようになっています。
この値を変更することにより、任意の画面サイズでのデザイン調整をすることができます。
こんにちは。
返信削除こちらのブログ、よくカスタマイズの参考にさせていただいてますが、今回はウチのカスタマイズがお役に立てたようで何よりです。
ナビ開閉ボタンの右寄せや、メニューの縦並び、早速ウチでも導入してみました。
自分はスマホを持っておらず、ユーザビリティの改善に関して気づかないことが多いので、こういうカスタマイズを教えていただけると本当に助かります。
初めまして！コメントありがとうございます。
削除こちらこそ、ふじやん。さんのナビゲーションカスタマイズはとても参考になりました。
ありがとうございます。
まだちょっと調整が足りないと感じているので、いろいろやっていこうかなって思っています。
私はHTMLなどのプロというわけではありませんが、自分なりにこれからもカスタマイズしていこうと思っています。
ブログカスタマイズ以外のことも書く予定ですが、またご訪問頂ければ幸いです。