WordPressでメニューバーを上端固定にする方法。【TwentyTwelve】



Screen_Shot_2013-02-12_at_10.12.04_PM.jpg

twentytwelveのメニューバーをカスタマイズ中です。大した事はやってませんが、iPhoneでも一応体裁整ったっぽいので一旦整理してログっときます。

まぁ好みだとは思いますが、メニューバーが上端に固定されてるとアクセスしやすくて良いなーと常々思っていたので、自分のサイトにも取り入れてみました。大した情報はありませんが。

ちなみにココまでの経緯は以下。実装方法が正しいのかどうかは全然わかりません。動けば良いの精神です。すんません。

Googleカスタム検索をAdSenseに紐付けてコードを取得する方法。 | Acid Note

Googleカスタム検索のコードをWordPressテーマのtwentytwelveに貼付ける方法 | Acid Note

メニューバーのコードは何処にあるのか?

まずは今回対象となるメニューバーのコードは何処に記述されているのか?それが重要ですが、コレはheader.phpの中にあります。たぶん下の方。

この辺はchromeデベロッパツールでごにょごにょやりながら解き明かしました。で、メニューバー全体の塊が、<nav id=”site-navigation” 〜>であることがわかりますので、ココを取り敢えず攻め立てます。

取り敢えずメニューバーを上端に固定

基本的にはデベロッパツールで対象を探して、idなりclassなりを突き止めたら、そのままCSSを弄くり倒して、気に入ったカタチになったら、それをテーマに貼付けます。もうダッシュボードで直貼りしちゃってます。適当です。

position: fixed で上端固定にしたら、width: 100%; z-index: 9999; で横イッパイに広がって最前面配置になってくれます。わからない人はCSSの基本-HTMLクイックリファレンスでも見れば良いと思います。その他の細かいところはお好みで。

メニューの位置とか上下のボーダーとか。好みの世界ですね。仕切りのボーダーとか入れたらオシャレになるんだと思います。zurui-design // Speaker Deck

と、コレで上端固定にするだけなら大体オッケーだと思います。なんだ、こうやってまとめるとホント大したことしてないのな。ここまでくるだけでも結構苦労したのに。。

Googleカスタム検索をメニューバー右端に設置する。

ココは以前の記事でも書いた通りですが、部分的な不具合を修正したのと、一応レスポンシブということでiPhone,iPadで表示が崩れる分は調整してみました。

取り敢えずコレでGoogleカスタム検索バーが上端右端に固定されました。widthとmarginを%指定しとくと、一応レスポンシブな感じになります。

iPhoneとかでトグルメニューになる時の表示を調整する。

ということなんですが、まず、twentytwelveでは(に限らず?)スタイルシートで先に幅が最小,つまりスマホなんかで適用されるスタイルを指示していき、最小幅が指定値を超える毎に対応するスタイルを上書きしていくという仕組みになってる様です。

なので、基本のスタイルシートにCSSをそのまま書き込んでしまえば、それで良いということになります。(多分)

まず、トグルメニューのボタンがセンターに配置されているので、左端にズラしました。で、トグルメニューが開いた時の背景色を指定しておきます。コレで全体的に体裁が整ったはず。

レスポンシブに関してはドットインストールにもレッスンがありますので、目を通しとくと捗ります。

レスポンシブなウェブサイトを作ろう (全11回) – プログラミングならドットインストール

取り敢えず、こちらからは以上です。整理しながらもいろいろ微妙な修正とかも出来て捗りました。まだまだ弄りたいところは各所にあるので、随時ログっていけたら良いかなと思っております。ナマステ。


コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">