PC1台で自由に人生をデザインするリクのブログ

賢威6.2のグローバルメニューをヘッダー部分に固定&追尾させる方法|CSSのみで簡単にカスタマイズ

 

ぼくのサイトではブログテーマ『賢威6.2』を使用していますが、やはりそのカスタマイズ性の高さは他のテーマに類を見ないレベル。

無料のテーマでは手の届かないところまでカスタマイズすることができるので、サイトを構築していくのもなかなか楽しいものです。

 

WordPressは無料ブログに比べてカスタマイズ性の高さが大きなウリですが、ブログテーマに関しても無料のものより有料のものを使っていくのが得策だとぼくは思います。

参考記事:WordPressのブログテーマは無料より有料のものがおすすめな理由

 

そこで今回は、このブログでも採用しているカスタマイズの中から『グローバルメニュー』をヘッダー部分に固定&追尾させる方法について紹介していきたいと思います。

 

賢威6.2のグローバルメニューをヘッダー部分に固定&追尾させる

 

今回解説するカスタマイズ方法を反映させることで、次のようにグローバルメニューをヘッダー部分(ページ上部)に固定させることができます。

 

このサイトを実際に見てもらってもわかるように、画面をスクロールしてもグローバルメニューが追尾してくるようになります。

 

それぞれの好みによってカスタマイズを反映させていって構いませんが、ぼく自身はこのカスタマイズを結構気に入っています。

というのも、グローバルメニューはタイトル部分の付近にあることからも、例えば『プロフィール』『お問い合わせ』などの読者にまず見て欲しい項目が配置されていますね。

 

しかしながら、記事を読む際に画面をスクロールしていくと、グローバルメニューがスルーされてしまい結局クリックされずに終わってしまうことも少なくはありません。

 

そこで、グローバルメニューをスクロールに追尾させていくことで、例えば記事を読み終わった際にサイトマップを見てもらったり、気になる項目をクリックしてもらう可能性も高まっていくわけです。

 

ですので、もしグローバルメニューのクリック率が低かったり、読者に読んで欲しい項目がなかなか読んでもらえないというような場合には、ぜひともこれから解説する方法を参考に設定してみてくださいね。

 

CSSのみで簡単にカスタマイズする方法

 

さて、それでは実際のカスタマイズ方法について解説していきますが、今回はCSSのみで設定していきます。

 

以前であればJavaScriptなどを活用して色々と設定しなければならなかったですが、positionの新しい値『stickly』が追加されてからは簡単に設定することができるようになりました。

sticklyを使った具体的なカスタマイズ方法について、解説していきましょう。

 

まず、今回はCSSにカスタマイズを施していくので、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択します。

 

design.cssのコードを少し下にスクロールしていくと、『グローバルナビ』と表記された部分があるので、そこに記載されているコードに変更を加えていきましょう。

『#global-nav』という部分がグローバルメニューのCSSになるので、ここでは以下のようにコードを追記します。

 

ここではpaddingプロパティで領域内のスペースを調節し、positionプロパティをstickly値で固定させるように指定し、topプロパティでトップからの位置を調節しています。

 

とは言っても何のことだかさっぱりという場合は、上記と同じような設定をしておけばOKです。

これで無事に、グローバルメニューがヘッダー部分に固定されるようになりましたね。

 

また、これはぼく個人の好みではありますが、グローバルメニューの追尾設定はあくまでメインの要素ではないため、あまり目立ちすぎると読者にとっても気持ちが良いものではありません。

 

そのため、メニュー部分の背景色を透明寄りに設定し、『さりげなく』メニューが追尾している状態を演出しています。

 

ですので、もし背景色が原色なのは気持ちが悪いというような場合には、先程と同様に『#global-nav』内に以下のコードを追記しておきましょう。

 

本来はカラーコードで透明色を指定することはできませんが、rgba値を使用していくことにより背景を透過することができます。

rgba値についてはHTMLクイックリファレンスさんで解説されているので、気になった方はチェックしてみてくださいね。

 

ちなみに余談ですが、今回使用したsticklyには『ベタベタする』『ネバネバ』するという意味があります。

 

カスタマイズが反映されない場合

 

これで無事CSSでカスタマイズを指定することができましたが、サイトを見てみても設定が反映されていないという場合もあるかもしれません。

 

そういった場合には、ブラウザに残っているキャッシュが原因となっていることがほとんどなので、一度キャッシュを削除してからサイトの様子を見てみましょう。

 

Google Chromeでキャッシュを削除する際には、まずメニューバーから『履歴』→『全履歴を表示』を選択します。

 

すると次のように履歴タブが開かれるため、『閲覧履歴データを消去する』を選択しましょう。

 

そして、キャッシュが削除されるよう設定されているのを確認できたら、『閲覧履歴データを消去する』を選択すれば、ブラウザに残っているキャッシュを削除することができます。

 

無事キャッシュが削除されたらカスタマイズも反映されるため、再びサイトページを更新して確認してみましょう。

 

最後に

 

以上、賢威6.2のグローバルメニューをヘッダー部分に固定&追尾させる方法について解説しました。

今回はCSSのみの設定だったため、コードを追記するだけの簡単な設定方法でしたね。

 

グローバルメニューの部分に手を抜いている運営者の方もいますが、サイトの顔とも言える部分に位置するグローバルメニューは、侮ってはいけない大切な要素です。

 

設置されている項目にしても、『プロフィール』『サイトマップ』『お問い合わせ』などの読者に読んで欲しいものが多いため、ぜひとも今回の設定を反映させて積極的にアプローチしていきましょう。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です