賢威6.1でヘッダーのh1を移動する方法

この記事は約5分で読めます。

  • LINEで送る

賢威h1テキストの位置移動

賢威6.1テンプレートでは、ヘッダーロゴ(文字タイトル)とグローバルナビの間にh1タグが表示されます。
この隙間を嫌う方が多いため、ヘッダーロゴの上部へh1テキストを表示させる方法を説明します。

header.phpを修正する

h1テキストの位置変更には、「header.php」を修正する必要があります。
WordPress管理画面の「外観 > テーマ編集」から、「header.php」を開きます。

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php title_keni(); ?>" /></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

上記のコードを検索等で探します。9行目がh1テキストを表示している部分です。
以下のように変更します。

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<h1><?php h1_keni(); ?></h1>
<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php title_keni(); ?>" /></a></p>


</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

「<h1><?php h1_keni(); ?></h1>」を5行目に移動しました。

「<h1><?php h1_keni(); ?></h1>」は「<div id=”header-title”>」の下ではないか?と
疑問になるかもしれません。

確かに、元々divタグ内だったので収まりはいいのですが、
この位置に移動すると、ヘッダーの説明文も同時にロゴの上に表示されます。

CSSでの修正は可能ですが、divタグ上部でも問題ないので、
修正方法が簡単な、今回の方法をご紹介しました。

賢威h1テキストの位置移動

画像のように、ロゴタイトルの上部(左上)へh1を移動できました。

ヘッダーロゴとグローバルナビの隙間を消す

h1テキストを移動したので、ヘッダーロゴとグローバルナビの間に隙間が残ってしまいました。
このままでも構いませんが、隙間を埋める方法も説明しておきます。

「外観 > テーマ編集」から「design.css」を開き、以下の2箇所を探します。

#header-in{ padding: 1em 0; }
#header .header-logo{
	margin-bottom: 0.2em;
	font-size: 3em;
}

この部分を、以下のように修正します。

#header-in{ padding: 1em 0 0 0; }
#header .header-logo{
	font-size: 3em;
}

賢威ヘッダーロゴとグローバルナビの隙間消去

ヘッダータイトルロゴとグローバルナビの隙間が消えました。

h1タグの削除やCSSでの非表示はスパム扱いになる可能性があるため注意

賢威5では、h1テキストがパンくずリストとして利用されていたので
ヘッダーに表示されることに違和感を感じる方も少なくありません。

h1タグをCSSの「display:none」などで隠してしまうサイトもあるようです。
しかし、h1はSEO関係なく非常に重要なタグであり、CSSなどで隠してしまうことはおすすめできません。

Googleのウェブマスターツールでも以下の通り隠しテキストについて明示されています。

Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドラインへの違反にあたります。過剰なキーワードなどのテキストは、次のような方法で隠される場合があります:

  • 白の背景で白のテキストを使用する
  • テキストを画像の背後に置く
  • CSS を使用してテキストを画面の外に配置する
  • フォント サイズを 0 に設定する
  • 小さな 1 文字(段落中のハイフンなど)のみをリンクにしてリンクを隠す

サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。

引用元:Googleウェブマスターツール「隠しテキストと隠しリンク」

スパム行為をするつもりがなくても、h1テキストを非表示(隠す)にしたり、
キーワードを詰め込みすぎる行為は、意図せずスパム扱いになってしまう可能性があるため、
熟練者で無い限り、h1テキストについては位置の移動のみに留めておくことをおすすめします。

  • LINEで送る

コメントを残す

このページの先頭へ