【即席】記事中のアフィリリンクを一発更新！

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

たいそうなタイトルですが、やることは非常に単純でしかも簡単です。jQueryを使ってアフィリリンクを本文カラムの特定の場所に挿入しようというものです。

この方法は、アフィリリンクをフリープラグインに設定しますので、ValueCommerceなどのJavascriptを使ったアフィリリンクやガジェットも記事中に挿入できます。

アフィリリンクを変えれば、全ページ一括で広告が置き換わりますので、リンクメンテナンスの面でも優れた方法だといえます。

各記事の最後にアフィリリンクを挿入する方法

最初の方法は、各記事の最後にアフィリリンクを貼り付ける方法です。

エリアの左端から表示されますので、掲載するアフィリエイトリンクはその幅を超えないようなものを選択するようにしてください。

まず、掲載したいアフィリエイト広告のリンクを取得しておきます。Javascriptやiframeタグを使用していても、フリープラグインに貼り付けますので、問題ありません。

jQueryを使う準備が整っていない方は、まず次のソースコードをフリープラグインにコピー＆ペーストします。

<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>

そしてその下ならどこでもいいので、次のコードを貼り付けます。

<script type="text/javascript">$(function(){$(".addhere").insertAfter(".articleText");});</script>

取得したアフィリエイトリンクを、準備で最初に貼り付けたソースコードの上ならどこでもいいので次のように貼り付けます。

<div class="addhere">
/* ここに取得したアフィリエイトリンクを貼り付ける */
</div>

はい、これで完了です。簡単ですね。アフィリエイト広告を変えたい場合は、フリーエリアのリンク部分を変更するだけで全ページの広告が置き換わります。

こちらも、できるだけ単純になるように、指定した場所の記事の左寄せでアフィリリンクを表示させる方法をご紹介することにします。

要領は1番目のやり方とまったく一緒。特定の場所を、記事中につくってあげるのがミソです。

最初の記事と同じです。

貼り付ける場所は、一緒。でも、ソースコードが少し違います。

<script type="text/javascript">$(function(){$(".affLink").insertAfter(".addhere");});</script>

最初の記事と同じです。

この方法を実現するためには、HTMLで記事を書く必要があります。けど、全然難しくありません。通常通りに記事は書いていただいても結構です。

ただ、「公開」ボタンを押す前に、「HTMLタグを表示」に切り替えます。

そして、広告を挿入したい場所の上の一文を、次のようにHTMLタグで囲みます。黄色い文字の部分です。

<div class="affhere">
（この文章の下にアフィリエイトリンクが挿入されます）
</div>

これで公開準備完了！　それほどややこしくなかったでしょ？

もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております