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

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

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

2014-06-04_03h43_49

 

触る箇所は2カ所です。

 

  1. CSS編集

 

2.header.php

 

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

 

1.CSS編集

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

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

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

 

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

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

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

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

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

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

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

2dab7fa23c1dd6b5ffa79aaf406a6429_s

 

2.header.phpの編集

※編集前の注意

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

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

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

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

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

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

 

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

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

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

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

 

 

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

 

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

<div class=”centerad”>

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

アフリエィトコードを貼ることについて

当ブログでは、先のところに、amazonのウィジッェットを掲載しております。

目的は収入ではなく、オススメの書籍などを紹介するためで、モーションが入っており見た目にも面白いので入れています。

(ヘッダー画像を作るのがめんどくさいので汗)

ここでご注意頂きたいのは、この場所にコードを貼ることの悪影響です。

SEO的に問題が発生する恐れがあります。

私はSEOに詳しくありませんが、タイトルのすぐ下にアフリエィトを貼ることにより、サイト自体へのSEO評価が下がる可能性があります。

SEO対策の鉄則として、サイトを評価する側(googleさんとか)に、広告要素をなるべく見せない様にすることが求められます。

SEOを気にされる方は、ここにアフリエィトコードを貼らない方が無難でしょう。

私はと言いますと、ぶっちゃけSEOに関しましては「そんなの関係ねぇ」状態ですので、無視しております。ハイ、オッパピー。

810cd05d

いつも応援頂きありがとう御座います
ポチっとしたら絶対合格!!

コメントを残す

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