スポンサーリンク

stinger5 記事下にアフィリエイト広告を貼る

stinger 5stinger5, アフィリエイト, 広告, 投稿, 記事の下, 記事下

stinger5

 

stinger5で投稿した記事の下にアドセンス広告以外のアフィリエイト広
告をランキング形式で設置してみた。

 

 

スポンサーリンク

stinger5 記事下にアフィリエイト広告を貼る

 

投稿記事下に自分のアフィリエイト広告を貼ることは、最もクリックさ
れやすい位置なので、アフィリエイターにとってはたいへん重要です。

今から書く記事にアフィリエイト広告を貼る場合は、その都度アフィリ
エイト広告のコードを貼り付ければ問題ないと思います。

でも、その都度アフィリエイト広告のコードを貼り付けるのは、とても
面倒だと思います。

 
過去に投稿した記事を読んでくれるあなた様もいるので、すべての投稿
記事の記事下にアフィリエイト広告のコードを、差し込みたいと思う人
はいると思います。(ぼくもそうです)

なのであらかじめすべての投稿記事ページに、アフィリエイト広告を貼
り付ける事ができるので、備忘録として紹介します。

 

stinger5 記事下にアフィリエイト広告を貼る方法

 

それでは実際にstinger5 の投稿記事下にアフィリエイト広告を貼る方
法を紹介したいと思います。

ワードプレスの「ダッシュボード」⇒「外観」⇒「テーマ編集」を開き
ます。

 

単一記事の投稿 (single.php)をクリックして開く

 
単一記事の投稿 (single.php)内にある以下のコードを探す。

 

見つけたら

コードのその下に以下のコードを追加する。

 

 

 

上記コードの解説

 
このコードは、ランキング形式で第1位から第3位までのアフィリエイ
ト広告を貼り付けるコードです。

私が「A8」でアフィリエイトしてる商品、3品を例として記述していま
す。

上記コード箇所では、ランキングボックスのタイトルを表示させるコー
ドです。

勝手にサーバーランキング」のタイトル名を、好きなタイトル名に変
えてください。

上記コード箇所では、ランキング第1位のアフィリエイト商品のタイト
ルを表示させるコードです。

第1位 エックスサーバー」のタイトル名を、好きなタイトル名に変
えてください(あなたが第1位と思う商品名)。

 

上記コード箇所では、ランキング第1位のアフィリエイト商品の簡単な

概要や説明を表示させるコードです。

 
「<p> ・・・・ </p>」の間に概要や説明文を記述します。
「<br>」のコードを記述すれば、改行します。

 

 

上記コード箇所では、ランキング第1位のアフィリエイト商品のバナー

コードを記述します。

 
「<div class=”rankst-l”> ・・・ </div></div>」の間にランキング
第1位のアフィリエイト商品のバナーコードを記述します。

上記コード箇所では、「詳細ページ」と言う文字をクリックすれば、ア
フィリエイト商品のホームページにジャンプさせるコードです。

「<a href=”http://www.xserver.ne.jp/“>」と「詳細ページ」はあなた
様に合うようなリンクコードとテキストに変更する。

 

 

 

上記コード箇所では、アフィリエイト商品のテキストバナーコードでリ
ンクさせています。

 
「<p> ・・・・ </p></div>」の間に、アフィリエイト商品のテキス
トバナーコードを生成して記述します。

次にそのテキスト部分の文字を私は、「公式サイトへ」に変更した。
これで一つの商品のアフィリエイト広告ができあがりました。

 

同じやり方で第2位および第3位の商品のアフィリエイト広告のコード
を記述します。

 
単一記事の投稿 (single.php)に記述するコードはこれで終了です。

 

 

ランキングボックスを装飾する

 

投稿記事を開いた時、クリックされやすいようにボックスを装飾します。

 

王冠の画像を用意する。

 
oukan
用意した画像のファイル名を「oukan」に、ファイル形式を「.png」で
保存する。(スタイルシートstyle.cssで指定してるファイル名「oukan.
png」です)

ファイル名や拡張子を変更した場合、スタイルシートstyle.cssも変更
してください。

 
FFFTP等のソフトを使って、テーマ「stinger5」フォルダーを開きます。
そしてその中にある「images」フォルダー内に「oukan.png」アップ
ロードする。

私の場合、「stinger5」の子テーマ内にアップロードした。

 

スタイルシート(style.css)に追記

次に「スタイルシートstyle.css」のスマホ~PC共通領域に、以下の
コードを追記する。

 

 

ボックスの背景色やテキストの装飾はそれぞれ変更してください。
「.rankst-box」でボックスの外枠の装飾をしています。

ブログによって表示される位置や、リンクボタンがずれる時などは、
「margin」や「padding」の変更が必要と思われます。

私の場合これでできました。

 

カスタマイズ後の画像です。
記事下に広告041

 

 

まとめ

 
これでクリックされやすい場所に、自分のアフィリエイトする商品を紹
介できるようになりました。

あとは、これを応用して一つの商品だけにしても良いし、まったくジャ
ンルの違った商品を紹介できると思います。

ただ、おまり多くのアフィリエイト広告を紹介すと、投稿記事が長くな
り読者様から嫌われるかもネ!!!

そしてついには、「google」様からも叱られるかも?

ほどほどに!!!!!!

 

スポンサーリンク