メニューバーを画面上部に固定させて追尾させてみた

stinger 5スクロール, ナビ, メニューバー, 固定stinger 5, ナビ, メニューバー, 固定

stinger5

 

ナビメニューバーを固定させて、スクロールしても追尾してくるようにカスタマイズしてみました。

ナビメニューバーを固定させて追尾させる

 

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

 

ナビメニューバーを固定させて、スクロールしても着いてくるようにしてみました。

 

ナビケーションメニューバーを固定して追尾させる事について、賛否両論の意見があります。大半の意見は「ウザットイ」みたいですネ。

 

でも私は記事を読み終わって別の記事に誘導できる手段としての利点があると思う。

 
私の場合ナビメニューバーの位置は、ヘッダーの上に移動させました。

 

以前紹介した

ナビメニューの移動とヘッダー及びフッターの背景を画面いっぱいに広げた

それと

stinger5ナビケーションメニューバーをグラデーションカスタマイズ

を参考にしてもらえば判ると思いますが、前回カスタマイズしたナビメニューバーの以下のコードを探します。

 
子のスタイルシート(style.css)を開く。

[css]
#menu {
width: 100%;
margin: 0 0 0 -410px;
padding: 0 300px 0 510px;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}
[/css]

 

上記コードに以下のコードを追加および変更する
「position: fixed;」と「z-index: 10;」を追記、それと「margin: 0 0 0 -410px;」を「margin: -20px 0 0 -410px;」に変更した。

 
「z-index: 10;」の「10」は、その人のブログによって変わる。私の場合、表示順位は今後の事も考えて「10」にした。

 

追記および変更後のコードは以下の通りになった。
[css]
#menu {
position: fixed; /*– ナビを固定したい時 –*/
z-index: 10; /*– ナビを固定したい時 –*/
width: 100%;
margin: -20px 0 0 -410px; /*– ナビを固定した時トップ余白を0から-20pxにした –*/
padding: 0 300px 0 510px;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}
[/css]

 

 

カスタマイズ後の位置等修正

 

検索ボックスアイコンの表示がメニューバーより上に表示されるので、子テーマに下記コードを追記
[css]
/*——————————–
ナビ固定時検索ボックスアイコンの
表示位置変更
———————————*/
#searchsubmit {
z-index: 1;
}
[/css]

 

 

下記コード内の「margin-top: 0;」を「margin-top: 15px;」に変更
[css]
/*—————————–
1024px ヘッダーの前にロゴ画像挿入
——————————*/
header .sitename a:before {
background: url(“images/logo.gif”) repeat scroll 0px 0px #EEEEEE !important;
border-radius: 120px !important;
box-shadow: 2px 4px 10px -3px #555555 !important;
content: “”;
display: inline-block;
font-family: optima;
height: 100px !important;
line-height: 1;
margin-top: 0;
margin-left: 100px;
margin-right: -50px;
text-align: center;
vertical-align: middle;
width: 100px !important;
}
[/css]

 
下記コード内の「margin-top: -25px;」を削除
[css]
/*————————————–
ヘッダ見出し
————————————–*/
margin-top: -25px;
[/css]
を削除した。

 

 

まとめ

シンプルにただ追尾するだけのカスタマイズだが、これはこれで気に入ってます。

カスタマイズ後ヘッダーの位置がずれたり、検索ボックスアイコンが表示されなかったり、修正するのにけっこう時間が掛かってしまった。

まあ~しばらくはこれで行きます。