賢威7のグローバルメニューを最上部に固定&スクロール追従させる方法

こんにちは、chiakiです。

 

賢威7は、賢威6.2に比べると

比較的カスタマイズがしやすく、

デフォルトでもおしゃれに感じますが、

 

オシャレゆえにデフォルト状態で

使用しているユーザーが多いようです。

 

 

まあ、デフォルトでも

大丈夫っちゃ大丈夫ですが、

 

カスタマイズして

他者との差別化を行った方が

絶対に良いブログになるので、

 

 

今回は、グローバルメニュー

最上部に固定&スクロール追従させる方法

に、ついて解説していきます!

グローバルメニューを最上部に固定&スクロール追従させる方法

 

上記の画像のように賢威7のデフォルトだと、

グローバルメニューの位置が固定されていますよね。

 

 

しかし、今回のカスタマイズ方法で

以下(↓)のように設定できるようになります!

 

グローバルメニューが

スクロールに追従していますよね^^

 

これらをすることによって、

以下(↓)のメリットが得れるようになります。

  • 他の賢威7ユーザーと差別化ができる
  • ユーザビリティが向上し回遊率がアップ(結果SEOが向上)

 

また、カスタマイズ次第では、

いくらでもオシャレなブログに仕上がります。

 

一石二鳥ですよね^^

 

 

 

賢威7のグローバルメニューを

最上部に固定&スクロール追従させる方法は

 

以下のCSSを

『外観⇒テーマの編集⇒base.css』の

最下部に記載して下さい!

 

以上のことで、

賢威7のグローバルメニューが

最上部に固定&スクリーン追従

されるようになります。

 

  • CSSを変更しても反映されない時はコチラをどうぞ!

参考:WordPressのCSS編集後に反映しない時の対策

 

細かい修正をしよう!

 

しかし、

グローバルメニューが最上部に固定されたもの

以下(↓)のようになっていないでしょうか?

 

CSSをサクっと編集できるなら

問題はないと思いますが・・・

 

ちょっと不格好ですよね。(笑)

 

 

その場合、ヘッダー画像を

サクっと編集するだけで

誰でも簡単に調整できます。

 

 

例えば、

元々、使用していたヘッダー画像は

以下のサイズです。

  • 幅:1545
  • 高さ:170

 

こちらの上部に白枠を足しましょう。

 

  • 幅:1545
  • 高さ:240

 

70pxだけ高く編集しました。

 

そちらの画像を

ヘッダーにアップデートしたら、

以下(↓)のようになります。

 

いい感じになりましたね。

 

あなたのブログサイズに合わせて

ヘッダーをご調整して下さい^^

 

関連記事

  1. WordPressでCSS編集前の注意点!エラーの対策をしよう

  2. 賢威7で見出しをカスタマイズ!おしゃれデザイン6選【コピペ】

  3. WordPressのCSS編集後に反映されない時の対策

  4. 賢威7でファビコンをたった1分でカスタマイズ!

  5. 賢威7でアイキャッチ画像のサイズをカスタマイズする方法!

  6. 賢威7でグローバルメニューを設置する方法について解説

  7. 賢威7で関連記事を記事下に自動表示させるカスタマイズ!

  8. 賢威7で『続きを読む』をオリジナル画像にカスタマイズする方法!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。