前回の記事で「ナビバーを上に張り付ける(固定する)カスタマイズも知りたい」というリアクションを頂きましたので、リクエストにお応えして手順を紹介したいと思います。(リクエストがなくてもたぶん書いてたと思いますがw)
下にスクロールしてもナビバーが上に固定された状態で着いてくるようになります。
数行の CSS を追記するだけの簡単作業です。
同じようなレイアウトのテーマであれば、QooQ 以外でも 適用できるかも。ちなみに私、シンプルテーマを使ってた時もこのカスタマイズをやってました。
ナビバーの位置
QooQ のカスタマイズでナビバーをヘッダーの下に移動させている方が結構多いようですが、ナビバーがヘッダーの上にあるか下にあるかでそれぞれ追加コードが異なります。
ちなみにナビバーとヘッダーの位置を上下入れ替える方法は、こちらのブログ記事でとても解り易く解説されていますのでご参照下さい。
moca*Bloggerメモ*2ndBlogger 「QooQ」 カスタマイズ*ヘッダー・ナビゲーションバーhttps://www.moca-memo.com/2020/02/blogger-qooq-header.html
テーマ編集は必ず予めバックアップを取ってから行って下さい。
追記 CSS
ナビバーがヘッダーの上にあるデフォルトの状態の場合
ナビバーとヘッダーの間に隙間ができたり、重なってしまう場合は
#header の margin-top の値で微調整して下さい。
#navigation { position: fixed; width: 100%; top: 0; z-index: 5; } #header { margin-top: 30px; }
ナビバーをヘッダーの下に移動させている場合
#navigation { position: -webkit-sticky; /*Safari 対応*/ position: sticky; top: 0; z-index: 5; }
2020/07/22 追記:
こちらの position:sticky の方法は、最初の「ナビバーがヘッダーの上にあるデフォルトの状態」でも使えますが、IE では非対応のため、ナビバーが固定されませんのでご注意下さい。
補足
自動目次やスムーススクロールを導入されている環境の方は、こちらの記事も御覧ください。
スクロール停止位置で見出しとナビバーが重なる問題の改善方法です。
ふじろじっく自動目次とスムーススクロール目次自動生成&スムーススクロールのスクリプトを導入しました。https://fujilogic.blogspot.com/2019/10/auto-toc-with-smooth-scroll.html#ps1
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
mocaさん、こんにちは。
mocaさんの記事、とても丁寧に説明されていて、全然雑だなんて感じませんよ。
むしろウチの記事の拙さや適当さがお恥ずかしいくらいです(^^;
ガラケーユーザーで手元にスマホがなく、Chrome の開発者ツール上でしか確認や調整できないもんで、スマホ実機での見た目や使用感を教えていただけるとありがたいです(^^)
私は QooQ のカスタマイズはもうほぼ理想的な状態にできたので、もうこれ以上弄ったり記事を書くことはないと思います。
当分は写真や音楽やゆるい雑記を書きつつ、オリジナルテーマ作りもボチボチ進めていこうかなと。
moca
ふじやん。さん
ブログでご紹介いただいて、ありがとうございます。
リンクをたどって見てみると、自分の説明の雑さに、変な汗が出てしまいました💦
カスタマイズが楽しくてもっといろいろやりたいのですが、自分のペースでコツコツやっていこうと思います。
ふじろじっく、スマホページもすっきりしていて素敵ですね♪