メニューバーの上に、アフリエィトリンクを貼る方法

当ブログでは、タイトル画像があり、その下にメニュー（ナビゲーション）バーがあります。

このタイトル画像と、メニューバーの間に、任意のリンクや画像を貼る方法を紹介いたします。

触る箇所は２カ所です。

CSS編集

２．header.php

以下、それぞれについてご説明させていただきます。

１．CSS編集

これは、その名の通り、スタイルシートの編集を行います。

これで貼り付け位置の微調整（すき間を空けたり）ができます。

外観⇒テーマ編集、もしくはjetpack導入済みの方は、css編集から、cssの最後に次の記述を追記します。

/* メニュー上の広告　*/
.centerad {
	text-align: center;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-left: auto;
/*-----IE用-----*/
	margin-right: auto;
/*-----IE用-----*/
}

/*メニュー上の広告*/の内容は、任意の言葉に変えてもらっても大丈夫です。

後々、自分がどういう変更をかけたか分かる様な文言にしておくと便利です。

padding～というのは、余白のことです。

0のところを10pxとすれば、10px分の余白を設定することができます。

自分のしっくりくる位置へ微調整ください。

とはいえ、ここだけ記述しても、貼る内容を指定していないので、見た目上は何も変わりありません。

そこで、つぎに貼り付ける内容を指定します。

２．header.phpの編集

※編集前の注意

ご使用のテーマの中にあるhader.phpの部分を編集します。

この～.phpというところを触るときは注意が必要です。

～.phpというのはプログラミング部分ですので、文字コード(utf-8等）に齟齬が生じない様にしなければなりません。

css編集は記述ミスがあっても、正しく表示されないだけで済みますが、php部分というのは間違った記述をすると、最悪の場合ブログの表示自体がされなくなる恐れがあります。

編集前に必ずバックアップを取っておきましょう。

それでは、header.phpを開いて

 <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->
<div class="clear"></div>
<?php if(is_mobile()) { ?>
<?php 
}else{
?>

<!--pcnavi-->
<div class="smanone">
  <div id="navi-in">
    <ul>
      <li> <a href="<?php echo home_url();?>" title="トップページ">TOP</a> </li>
      <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
    </ul>
    <div class="clear"></div>
  </div>
</div>
<!--/pcnavi-->

stinger3であれば、header.phpのだいぶ下の方に上記の様な記述があります。

ポイントは、
<!–pcnavi–>
というキーワードを探してください。

このキーワードは、メニューバー（ナビゲーションバー）のことを示しています。

貼り付けたい場所は、メニューバーの上なので、ここの直前に貼り付けるコードを以下の様に記述します。

<div class="centerad">
 *貼り付けたいコード* 
</div>

まとめると、以下の様になります。

<!-- /#gazou-in --> 
</div>
<!-- /#gazou -->
<div class="clear"></div>
<?php if(is_mobile()) { ?>
<?php 
}else{
?>
<div class="centerad">
*貼り付けたいコード*
</div>
<!--pcnavi-->
<div class="smanone">
  <div id="navi-in">
    <ul>
      <li> <a href="<?php echo home_url();?>" title="トップページ">TOP</a> </li>
      <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
    </ul>
    <div class="clear"></div>
  </div>
</div>
<!--/pcnavi-->

10行目の箇所に、任意のものを入れてください。

<div class=”centerad”>

というのは、最初に１で設定したCSS編集とリンクさせたものです。