Free!なランサー3

ふとした疑問やコアなお役立ち情報をお届けする情報サイト

メニューバーの位置を少しだけ移動させる

   

wp logo gush

見ての通り、当ブログはメニューバーの位置を少しだけずらしています。

Gushのメニューバーはヘッダー画像にくっついているので

デザイン的に少し圧迫感を感じる人もいるかと思います。

そこでメニューバーの位置を少しだけ移動させてみましょう。

スポンサーリンク

移動方法

外観>テーマの編集>ヘッダー

と進みましょう。

通常はこのようになっています。(下部)

<div id=”header”><!– header –>
<header>
<div class=”hgroup”>
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h2 class=”caption”><?php bloginfo(‘description’); ?></h2>
</div>
<div class=”menubtn”>MENU ▼</div>
<nav id=”menu” class=”togmenu”>
<?php wp_nav_menu(); ?>
</nav>
</header>
</div><!– //header –>

赤文字の部分を一番下に移動させます。

<div id=”header”><!– header –>
<header>
<div class=”hgroup”>
<hgroup>
<h1 id=”logo”><a href=”<?php echo home_url(); ?>” title=”<?php bloginfo(‘name’); ?>”>
</a></h1>
<h2 class=”caption”><?php bloginfo(‘description’); ?></h2>
</hgroup>
</div>

</header>
</div><!– //header –>
<div class=”menubtn”>MENU ▼</div>
<nav id=”menu” class=”togmenu”>
<?php wp_nav_menu(); ?>
</nav>

 

そうすると、当サイトのようにメニュバーとヘッダー画像の間に若干の隙間ができます。

メニューバーの隙間

今回はメニューバーの位置をずらす事を目的に行っています。今のところ、表示に不具合はありませんがHTML/CSSを扱う場合はデザイン自体が崩れないように注意してください。自分でカスタマイズを行う場合は慎重に行いましょう。

 - Gushカスタマイズ ,

Message

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

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

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

追跡
サイドメニューに追尾型広告、Standard Widget Extensionsを設定する方法

追尾型広告の効果は絶大です。しかしどのプラグインがいいのかわからない人は管理人も …

wp ロゴ カスタマイズ
wordpress無料テーマ「Gush」のカスタマイズ【補足】

このブログはElloraさんの作った 無料テーマ「Gush」を使用しています。 …

ヘッダー 広告
ヘッダーに新しくウィジェットを追加して728×90のAdSense広告を設定する方法

ヘッダーに新しくウィジェットを追加したいと思います。 コピペでできますが今回は7 …

error
テーマのデザインをカスタマイズ中にエラーでログイン出来なくなった時の対処法方

私はWPテーマGushを使っています。 カスタマイズの際、phpをいじっていざ更 …

7
背景画像の前にもう一枚背景を追加する方法

どういう事?って感じですがタイトルのまんまです。 前回紹介した記事↓ ヘッダーの …

44
ヘッダーの背景画像を消す方法と他色々

なんやかんやでGushからGush2にテーマを変更することにしました。 やるから …

6
簡単にブログタイトルを画像に変更する方法

やはりブログタイトルは画像もしくはロゴに限りますね! 名前は一番最初に見られるで …

wp ロゴ カスタマイズ
当ブログ「Gush」カスタマイズ記事が紹介されました。

スポンサーリンク 紹介してくださったブログ 100万円を1億にするブログさんで当 …