クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

【WordPress:twenty twelve】ナビメニューを上部に固定する方法

      2013/12/30

皆さんこんにちわ。

今回はtwnty twelveテーマのメニューを上部に固定する方法を記事にしたいと思います。 20131121_01

 

 

 

 

 

久しぶりに我がブログサイトを見たら何か殺風景だなーと思ったので試験的にいじくってみました。
今回はtwenty twelveテーマのナビメニューを上部に固定する方法です。

上部に固定しますので、下にスクロールしてもナビが画面についてくるようになります!

方法は以下から↓

目次

  • CSS(スタイルシート)のナビゲーション部分に追記&削除。
  • コンテンツ部分のレイアウト崩れを解消するためにCSSのコンテンツ部分に追記。
  • トグルメニューがオンになった際に生じる上部余白の削除。

 

CSS(スタイルシート)のナビゲーション部分に追記&削除。

twenty twelveテーマのナビゲーションメニューのCSSの位置はデフォルトの状態からクラス名を変更していなければ.main-navigation部分に当たります。

そこに以下のコードを記述します。(デフォルトの状態にあって以下のコードにない場合は/**/などで囲ってコメントアウトしても構いません。ただし自己責任でお願いします)

.main-navigation {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: auto;
text-align: center;
background-color:#000;
}

position: fixed;で要素の固定を指定します。

top: 0; left: 0;は画面左上部から何pxの位置を開始位置とするかなのでこの場合は両方とも0です。

z-index: 9999;はいうなればイラストレーターなどのレイヤーの概念に似ています(私だけそう思うのかも)
要素の重なり順を指定しますので、9999で最前面になります。ほかの要素にposition要素を付加していなければ9999でなくとも1や2などでも最前面になります。

画面いっぱいにメニューを表示したいのでwidth: 100%を指定。

高さを固定してしまうと(たとえば40px等)ブラウザを縮小した際等にメニューのリストの一部が背景から飛び出てしまうのでheight: auto;を指定しています。(これに関しては記述しなくても勝手にautoになります。)

text-align: center;に関してはデフォルトのまま。

background-colorに関してはお好みの色を指定してください。

コンテンツ部分のレイアウト崩れを解消するためにCSSのコンテンツ部分に追記

ここまで記述できたら「えっ!?」とおもわれるかもしれません。

何故ならメインとなる記事やサイドバーのコンテンツ部分のレイアウトが崩れてしまうからです。(崩れないよ!という方はこの章は無視してください。)

私の場合ヘッダー部分にfloat要素を指定しております。

本来、ナビゲーションメニューの.clear: both;プロパティがコンテンツ部分のレイアウト崩れを解消してくれるのですが、.main-navigationにpositionプロパティを付加したことにより.main-navigation要素のclear: both;プロパティが無効となりコンテンツ部分が崩れてしまうのです。

それを解消するために以下のようにCSSの.wrapper要素にclear:both;を記述します。


.wrapper{
clear: both;
background-color:#fff;
box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
padding: 10px;
}

※clear: both;プロパティ以外はデフォルトです。

これでレイアウト崩れを解消できました…はずです。

トグルメニューがオンになった際に生じる上部余白の削除

ここまででも十分かもしれませんが、twenty twelveテーマといえばレスポンシブレイアウトがウリのテーマです。

そこでブラウザを縮小したり、スマホで表示を確認するとトグルメニューが表示された際に上部にわずかに隙間ができてしまいます。

これを削除するために最初に記述を行った.main-navigation要素に以下の一行を追加します。


margin-top: 0;

これでトグルメニューの上部の余白が消えましたね。

以上で、twenty twelveテーマのナビゲーションメニューを上部に固定する方法は終了です。お疲れ様でした。

ではまた。

 - WordPress ,







Message

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

CAPTCHA


  関連記事

【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 記事の一部修正【改善】

本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5 …

no image
簡単にCSSでのグラデーションを実現!「Ultimate CSS Gradient Generator」!

記事のタイトルの背景が無色透明だと無味乾燥だなぁ・・・とは思いませんか? そこで …

no image
サイトタイトルをロゴに変更しました。

所要時間5分程度で作ったロゴをサイトのトップに。 最近、私地元でMr.child …

no image
author をウィジェットで表示する方法。

先日、制作兼管理人の情報をウィジェットエリアに追加しました。 自分の写真を乗っけ …

20150221_custommenu_07
WordPressカスタムメニュー作成手順

WordPressにおけるカスタムメニューの作成手順を解説します。 WordPr …

no image
WordPress をマルチサイト化しました。(参考URL有り)

私、複数サイトを制作したくてマルチサイトの勉強を致しました。 参考にさせて頂いた …

no image
twenty twelve フッター部分にウィジェットを追加する方法(参考URLあり)

みなさま、こんにちわ。 え、「なんかデザイン変わってね?」。HAHAHA。いろい …

no image
子テーマの重要性

あー、やっちまったよ と思いましたが後の祭りでした。 先日、一年ほど前から運営し …

no image
ポートフォリオサイト公開しました。

「次週位にポートフォリオサイトを公開します!」と豪語してたのなんだったのと言わん …

【WordPress:プラグイン】google xml sitemapsを マルチサイトで使用できるようにしてみました。

皆さんこんにちわ。最近仕事に忙殺されている私です。 今回は初めて(?)プラグイン …