STINGER

STINGER PLUS2のページ最上部にメニューを表示してスクロール時も固定するカスタマイズ

投稿日: 更新日: 2017年11月23日

このブログのテーマはSTINGER PLUS2ではありませんが、今回紹介するカスタマイズと同じようにメニューを固定しているでででーさん(@d3_dayo) です!

 
この記事で紹介するカスタマイズはPCで閲覧した際に、通常はヘッダー下あたりに表示されるグローバルメニューの位置を固定するものです。まさに完成図は、今この記事をPCから読んでくださっている方なら見えていると思いますが、ページ上部にメニューが固定表示されていると思います。
 
今回のカスタマイズ手順ではこのようにSTINGER PLUS2のメニューをページ最上部に固定し、スクロールしても追尾してくるように設定します。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

冒頭でこのブログ自体が完成図だと書きましたが、今回紹介するカスタマイズをテスト環境でも施してみたので、スクリーンショットとしてお見せしたいと思います。
 

 

 
ページの最上部にグローバルメニューが固定表示されます。そして、ページを下の方にスクロールしても表示は消えることなく最上部に固定されたままなので、ページのどの位置からでもメニューに表示されたコンテンツへとすぐにアクセスすることが可能になります。
 
 

前提条件

今回のカスタマイズ手順は、以下の記事で紹介したヘッダーのタイトルテキスト部分を非表示にするカスタマイズを施していることを前提に紹介していきます。

上記のカスタマイズを施していない状態(タイトルテキスト部分が表示されている状態)でこの記事の手順通りにCSSなどを調整しても、ヘッダー部分は正常に表示されないと思います。
 
 

グローバルメニューの固定化手順

ここからページ最上部へのグローバルメニュー固定化手順を解説していきます。手順は大きく分けて2つ、管理画面でのメニュー表示設定とCSSでの各種調整になります。style.cssを編集することになるので、作業の前には念のためバックアップをとっておくことをオススメします!
 

STINGER+2 管理でPC用グローバルメニューを表示

既に表示する設定になっていても、場合によっては表示位置を設定から調整する必要があるので念のためご確認ください。
 
WordPressの管理画面から「STINGER+2 管理」を開き、「メニュー設定」を選択します。
 

 
 
メニュー設定の行へと移動するので、設定項目から「PC用メインメニューを上に表示する 」を選択し「save」します。
 

※グローバルメニューを表示する設定にしていても「PC用メインメニューを下に表示する(デフォルト)」に設定されている方は、上記の設定へと修正してください。
 
 
以上でSTINGER+2 管理での設定作業は完了です。この状態でページを確認すると、グローバルメニューの見た目を調整していない場合にはこんな感じで表示されているかと思います。
 

 
次にやることはCSSで上記メニューの見た目を調整、そしてスクロールしてもページ上部に固定表示されるようにしていきます。
 

以下のCSSを追記する

最後の仕上げとして表示したグローバルメニューの固定化、そして見た目をCSSで調整します。コピペしやすいようにCSSを一気に記述したものを用意しました。以下のCSSをstyle.cssにコピペしてください(各コードの説明はコメントアウトで記載しています)

カラーコードなどはご自由にお好きな色へと変更してください。あと「表示崩れるようならこのコードは追記しないでOK」とコメントアウトした行は、私がテスト環境で試した結果に最適化していますので、もしもレイアウトが崩れてしまう場合には、この部分の記述は消してみてください。
 
 

まとめ

以上がグローバルメニューをページの最上部に固定するためのカスタマイズです。
 
固定しておくことによるメリットは、たとえばページの中段くらいからでもトップまで戻らずにメニュー内のコンテンツにアクセス出来ることですね。
 
案外、訪問者よりもサイト管理者自身にとって便利だったりもします(私も自分のブログで自分自身がよくメニューバーを使っているのでメニュー固定は非常に快適です)
 
メニューの背景色や文字色などは、ご自身の好みに合わせてご自由にお使いください!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ