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

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

【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


  関連記事

no image
MANP環境のWordPressをマルチサイト化した方法。

さすがに本番環境であれこれ触りまくって公にしてしまうのはどうかと今更ながらに感じ …

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

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

no image
【WordPress】TwentyTwelve 「続きを読む」を画像に変更する方法。

TwentyTwelveテーマに限らず記事を作成しているときに挿入できるmore …

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

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

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

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

no image
ロリポップレンタルサーバーで記事を編集中に「403エラー」が出た時もしかしたらこの対処をすると大丈夫かもしれない。

先日、wordpress twenty twelve に子テーマを設定する。(前 …

no image
Twenty Twelve サイトタイトルをロゴに変更する方法

先日、サイトタイトルをロゴに変更しました。という記事を書きました。 以下はそのコ …

【WordPress】Twenty Twelve にヘッダーウィジェットを追加する方法。

前回の記事Twenty Twelve テーマにヘッダーウィジェットを追加しました …

【デザイン】ブログのデザインについての考察(その1)【ブログ】

皆さんこんにちわ。 今回はブログのデザインについての私なりの考察(その1)を記事 …

no image
【WordPress:ボロス兵士の日誌】にwordpress popular postsをインストールして横並びにしてみました。※レスポンシブ対応

私がこの前開設してなかなか順位が上がらない困ったサイトちゃんのお話です。 ボロス …