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

stinger 5グラデーション, サブメニュー, ナビケーションメニューstinger 5, サブメニュー, ナビケーションメニュー

stinger5

何回かこのブログで取り上げていますが、stinger5のナビケーションメニューを改めてリニューアルしたので備忘録として書き留めています。もちろんサブメニュー付きです。
リニューアルしたstinger5のサブメニュー付きのナビケーションメニューをグラデーションカスタマイズをした備忘録として紹介しています。

 

サブメニュー付きメニューバーのグラデーション

 

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

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

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

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

 

前回このブログでナビケーションメニューのカスタマイズを紹介していました。
stinger5サブメニュー付きナビケーションメニューをカスタマイズ

stinger5 ナビケーションメニューのカスタマイズ

今回は以前にも増してより理想に近いナビケーションメニューになった。

 

header.phpの書き換え

「header.php」を開いて「</header>」すぐ上の 「<!?メニュー?>」の部分を書き換えます。
デフォルトでは

となっていると思います。

上記コード内にある

上記コードを削除してからそこに下記コードを追記します。

 

私の場合他にカスタマイズしているので

子テーマの「header.php」を書き換えた。

上記コード内にある以下のコード

「<div class=”header-nav-inner”>」を
「<header> 」の下に移動する。
上記コード内にある

上記コードを削除してからそこに下記コードを追記した。

 

js/base.jsファイルに追記

FFFTPソフト等で自分のサーバーにアクセスします。

「wp-content」フォルダー ⇒「themes」フォルダー ⇒ 親の「stinger5バージョン」フォルダー ⇒ 「js」フォルダーをクリックする。

次にそのフォルダーの中にある「base.js」をPCのお好きなフォルダーにダウンロードする。

次にダウンロードした「base.js」を「Terapad」等で開きます。

開いたら次に以下のコードを最下部にコピペします。

 

 

ここで注意

コピペが終わって保存する時は、文字コードに注意が必要です。

「Terapad」等で開いた時、右下の方に「文字コード」が表示されていると思います。

保存する時は、その「文字コード」で保存しないとダメのようです。

私の場合「文字コード」は、「SHIFT-JIS」だったので文字コードを「SHIFT-JIS」にして上書き保存した。

 

 

次に上書き保存できた「base.js」ファイルをサーバーにアップロードする。

 

スタイルシート(style.css)に追記

念のため、親テーマのスタイルシート(style.css)内にある「メニュー」を「コメントアウト」した。

コードの先頭行の前に「/* コメントアウト —-」を追記。
コードの最終行の後ろに「—– コメントアウトここまで */」
子テーマのスタイルシート(style.css)を開きます。

 

そんで改めてカスタマイズしたコードを子テーマに追記した。

 

まとめ

 

なんか長~いコードになってしまったけど、もしかしたら要らないコードが出てきたりして?

その時は「メンゴ!!!」

グラデーションについてですが、現バージョンの「Google Chrome」・「Firefox」と「ie 11」での確認はしていますが、それ以前のバージョンや「サファリ」等の他のブラウザについては確認が取れていない。

なので本当にこのコードでグラデーションがすべて掛かっているか判りません。

またブログによってはマージンやパディングの変更調整が必要と思われます。

まだまだ私の理想に近づいただけで完全ではありません

その時は備忘録として紹介します。