■WP｜ナビゲーションバーのカスタマイズ

当該ブログはワードプレス・テーマ「stinger3」を使用しています。そのナビゲーションバー（PC用）のカスタマイズについて以下のようにご案内いたします。（上段のナビゲーションバーを参照ください）

ちなみに、これは悪戦苦闘の結果である。はじめに、ナビゲーションバーを画面両端いっぱいに広がるようにしようとしました。そしてリストは中央寄せにしたかった。たぶんすぐにできる。そう素人は考えました。

しかし、stinger3のナビゲーションカスタマイズでネット検索しても、そのとおりできる記述が見つかりませんでした。そこで別のワードプレステーマのCSS記述を参考にしてstingaer3に当てはめた訳です。それでも微妙にどこかが違うようでそのままでは使えませんでした。何の変化もなかったり、とんでもなく飛び出したり、段差が付いたりと、これは駄目だと何度も諦めようかと思いました。

なんで記述がこんなに違うのか、とてもいらいらしました。知識がないというのは如何に不便か、それを実感しました。

それでも、しつこくいろいろいじって見たところ上にあるナビゲションバーができました。本当は、ナビゲーションのリストを中央寄せにしたかったのですが、それはいまのところできていません。現状では、なんとか縮小・拡大しても固定の位置に留まっています。まあ、これでいいかと思っています。

なお、クロームのデベロッパーツール？で他のブラウザではどう見えるか確認してみました。たぶん問題なさそうです。もし、レイアウト崩れがある場合は教えて頂けると幸いです。

追記、横スクロールバーが出るまで拡大すると、何故かトップのボーダーとナビゲーションバーの背景色が消えています。これはどうしてなのか。当該ブログと同じような設定の他のブログでもそのように表示されている。これはそのままでいいのか？

試行錯誤の結果（大袈裟ですが）が、以下の通りです。ワードプレスの編集、スタイルシートのなかにナビゲーションという記述があります。そこに、元はなかった「#navi-in」「#wrapper,#navi-in」「#navi-in ul」という項目とその記述を追加しました。

ネットで調べて得た記述はそのままでは何の効果もなかった。そこで試行錯誤してあれこれミックスした結果が以下の記述です。これでいいのか、なんの効果も期待していませんでしたが、バーの背景色は両端に広がり、リストは縮小・拡大しても固定されています。

ワードプレスユーザーで当該ユーザーと同じく知識の無い人の一助になればと思い上の記述を公開いたしました。

当該ユーザーと同じくらいの知識の人にもう少し説明しときます。

既存のナビゲーション記述に追加する項目は以下の通りです。

ちなみに、 width: 1056px;がリストなのかサイトの幅なのか不明確です。ちなみに当該サイトの幅は1056pxです。よく分からないが、それでも、とにかくこのサイトのナビゲーションバーのようになります。

当該ユーザーと同じく、あれこれ試行錯誤している人がきっといるに違いない。
しかし、本当にこれでいいのか。それは当該ユーザーには知る由もない。ワードプレス、それもstinger3のカスタマイズの知識がある人に教えて頂きたい。実は、これを公開したのは、そこに目的がある。

知識の有る人で、しかも良い人？がいましたら是非、当該ブログの問い合わせメールで教えてくれると幸いです。「たぶん、これでいいです」だけでも助かります。また、横スクロールバーが出るまで拡大すると、何故かトップのボーダーとナビゲーションバーの背景色が消えています。この件もよろしくお願いいたします。beingwildより