ヘッダーメニューバーの位置を修正(CSS編集) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


宮城県で赤ちゃん・ママを対象にしたベビーダンスの講師をしている太齋直子(ださいなおこ)さんから、次のようなご質問をいただきました。


質問:タイトルのメニューバーの位置について

こんばんは。

(~略~)

実は、気が付いたらいつの間にかタイトルのメニューバーの位置がおかしくなってしまっており、原因も直し方もわからず途方に暮れておりました。
もう1ヵ月以上になるかと思います。

そんな時、11月3日の 「ヘッダーメニューバーの位置を修正」という記事を見つけ拝見させていただきました。

まさに私と同じだ!と思いました。

CSS編集に、

/* メニューバー位置を修正 */
.skinContentsArea{
padding-top:60px;
}

の部分を追加とあったので、早速やってみたのですが、改善されないようなのです。

(~略~)

どうぞよろしくお願いいたします。
(文章、略していますが、とても丁寧に書いていただいています。)


2013年11月3日に書いた
ヘッダーメニューバーの位置を修正(「カスタム可能」デザインでない場合)
をご覧なって、その通りやってみたようですが、うまく直らない・・・

ということのようでして。

実際にブログを拝見しますと↓↓↓


川上雄大のワンポイントレッスン

確かに、下方向にヘッダーメニューがずれていますね。

川上雄大のワンポイントレッスン

そして、その箇所のCSSソースを確認しますと、上からの距離が410pxになっています。

/* ■ヘッダメニュー(フリースペース使用)■ */
ul#gnavi {
 position :absolute;
 top  :410px; /* .skinFrameを基準とした上からの距離 */
 left  :20px; /* .skinFrameを基準とした左からの距離 */
 width  :980px; /* ヘッダメニューの幅 */
}

そこの数字を 410 から 320 に変更してあげます↓↓↓

/* ■ヘッダメニュー(フリースペース使用)■ */
ul#gnavi {
 position :absolute;
 top  :320px; /* .skinFrameを基準とした上からの距離 */
 left  :20px; /* .skinFrameを基準とした左からの距離 */
 width  :980px; /* ヘッダメニューの幅 */
}

すると、メニューバーがヘッダー画像の下にぴったりとくっついてくれます!

川上雄大のワンポイントレッスン

ぜひ、お試しくださいませ^^!

このご質問をいただきました、宮城県で赤ちゃん・ママを対象にしたベビーダンスの講師をしている太齋直子(ださいなおこ)さんのブログはこちらになります!




以上、ヘッダーメニューバーの位置を修正でした。



LIDS澄川・ライフデザインスクール
川上 雄大