	[ コンピュータ/インターネット - ブログ ]		livedoor ブログをはじめる

アフィリエイトは儲かんないってば

2007年10月09日18:04

もう2年以上悩んでいたことが、とりあえず解決しました。
livedoorBlogの個別記事の下の方に、「同じカテゴリーの他の記事を表示する」ただそれだけのことが出来ずにずっと方法を考えていました。今回ようやくできました。
恐ろしくアナログな方法ですが（笑）。

ライブドアブログのカテゴリーは、ひとつの記事に対して二つ選ぶことができます。

ライブドアブログの独自タグで言うと、<$ArticleCategory1$>、<$ArticleCategory2$>がカテゴリー名をあらわすタグなのですが、それはわかっても、その先が進みません。
カテゴリー内の記事の一覧表示が出来ないものか、ずっと悩んでいたのです。とりあえず<$ArticleCategory1$>だけでいいから何とかならないものかと。

少し似たようなカスタマイズに、カテゴリー別ページの記事一覧というのがあるんですが、カテゴリー別ページや月別ページでは、記事を繰り返し表示する「ループタグ」というのがあって、簡単に出来るのです。
しかし、個別記事ではそのループタグが使えない。ここで2年ほど行き詰っていました。
記事の一番下にカテゴリー内の他の記事が表示されれば、興味を持ってくださった方なら、似たようなジャンルの記事を読んでくれるかもしれない。Movable Typeとかなら出来そうなのに、何でlivedoorBlogではできないんだと地団駄踏んでいました。

発想を変えると、とりあえずこのカテゴリー名をどうにかして認識して、どっかにあるカテゴリー別記事一覧を表示できないものか。

それから、もう一つ別の思惑がありました。
記事一覧をそのまま表示してしまうと、カテゴリーによってはものすごくページ内のリンクが増えてしまうのです。
出来たら、ページ内のリンクは必要以上に増やしたくない。

そうなると、選択肢はJavaScriptの一択となっていました。
（参考記事：Java scriptとリンク）
が、一択となって残ったまま、解決法がわからず、ただただ長い時間が過ぎ去っていたのです。

しかし、そうも言ってられない事態が発生しました。
ちょっと前に、サイトマップを作成したのですが、これが大誤算。
やはり他のサイトに移動してしまうような形のナビゲーションはあまり使用感が良くないらしく、ページビューは減少。
また、インターネットエクスプローラーで表示が微妙に遅いことから自分でも使いにくい（笑）という問題が発生しておりました。

そこで長年放置していたこの「同じカテゴリーの他の記事を表示する」問題を、私的には何が何でも解決しなければならなくなったのです。

前置きが長くなりましたが、方法に入ります。

まず、どうやったら、カテゴリー名の情報をJavaScriptで認識して、JavaScriptに手渡せるのか。
ついこの間PHPをはじめてみましたが、いつまでたっても相変わらず知識は進歩しておりません。JavaScriptも同じようなものでほとんどわかっていません。
今回、document.writeで文字が書けるということを学びました。

どうしていいか良くわからなかったので、質問してみました。

すると、あっさりカテゴリー名が取得できることが判明。

<IfArticleCategory1>
<script type="text/javascript">

</script>
</IfArticleCategory1>

var 変数名で変数を定義することが出来ます。
<IfArticleCategory1>は「カテゴリー1を定義していたら」というライブドアブログの条件タグです。

簡単に変数としてカテゴリー名が取得できましたが、次にどうやって記事一覧を作ればいいのか。
理想としてはカテゴリー別ページのRDF情報を取得して利用し、自動で記事一覧のリンクを作る、ということですがもちろん出来ません（笑）。

しょうがないので、手動でホームページで記事一覧のページを作りました。
ただ、カテゴリー別ページに一覧を作っていたので、ほとんどカテゴリー別ページのソースをコピペするだけですみました。メタタグで文字コードをeuc-jpで指定して、euc-jpで保存しなければいけません。
カテゴリーが60個くらいあったのは想定外でしたが（笑）。

あまりにページ数が多く、もし全ページ間違いが発見されたらどうしよう・・・と思い、必要に迫られ、Dreamweaverのテンプレートという機能を初めて使ってみました。
このテンプレート機能というものは、編集可能領域以外をテンプレートにすると、テンプレートを使用して作ったページは、テンプレートを変更すれば全てのページのテンプレート部分が変わってくれるという優れものです。
記事一覧のリスト部分のみを編集可能領域にして、60ページほど作成しました。

作ったページサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>タイトル</title>
<style type="text/css">

</style>

</head>
<body>
<ul>
<li><a href="http://afiliate.livedoor.biz/archives/000001.html">サンプル1</a></li>
<li><a href="http://afiliate.livedoor.biz/archives/000002.html">サンプル2</a></li>
</ul>
</body>
</html>

画像「list-link.gif」

画像「list-hover.gif」

そうして作った60ページに及ぶ記事一覧ページを、あとはカテゴリー名にあわせて表示させれば良いだけです。
しかし、その方法もまた、わからない。

JavaScriptにもifという条件分岐のコマンドがあります。
ifで条件を分岐し、カテゴリー毎に表示するHTMLを変えてカテゴリー別一覧ページを呼び出したら良いんじゃないかと考えました。

とりあえず、iframeという便利なものがあります。
（参考：いいわけジェネレーターの作り方）
document.writeでif内に直接iframeのHTMLタグを書いて呼び出すURLを変えておけば、たぶんカテゴリー名ごとに違った一覧ページが呼び出されるはず。

そういうわけで、if文とdocument.writeだけで、JavaScriptを作成しました。

内容はこんな感じ。ぐちゃぐちゃなJavaScriptです（笑）。

if (category1 == "アフィリエイト"){document.write("<div class='box'><iframe frameborder='0' src='http://サイトのアドレス/afilieito.html' width='400' height='190' marginheight='0' marginwidth='10'></iframe></div>")}
if (category1 == "まとめ"){document.write("<div class='box'><iframe frameborder='0' src='http://サイトのアドレス/matome.html' width='400' height='190' marginheight='0' marginwidth='10'></iframe></div>")}
if (category1 == "著作権"){document.write("<div class='box'><iframe frameborder='0' src='http://サイトのアドレス/chosakuken.html' width='400' height='190' marginheight='0' marginwidth='10'></iframe></div>")}

アフィリエイト、まとめ、著作権、などの部分が、自分のlivedoorBlogに実際あるカテゴリー名です。カテゴリー名に対応して、作ったカテゴリー一覧ページのアドレスをsrcの部分に入力します。

作った文字列をiframes.jsという名前でeuc-jpで保存し、アップロード。

個別記事のHTMLの記事の下の部分に下記のものを入れ込みました。

<IfArticleCategory1>
<script type="text/javascript">

</script>
<script src="http://サイトのアドレス/iframes.js" type="text/javascript"></script>
</IfArticleCategory1>

スタイルシートに下記のものを入れ込みました。

.box {
padding:0;
margin:0;
border:solid 1px #999999;
width:400px;
}

スタイルシートを再構築した後、「投稿したブログを編集する」で個別記事のひとつを選んで、何もせずに「この内容で投稿する」を押します。

すると、その個別記事のみが再構築されますので、うまく表示されているか確認します。

おお、表示されてる！！

表示されていれば、全ページ再構築。
カテゴリ－１を設定しているページには、うまくいけば、作った記事一覧ページが表示されます。

2年越しの悩みが一応、解決されました。

これがJavaScriptでもっとスマートに出来るようになりたいものです。

追記：すみません。大事なことを言い忘れていました。
カテゴリー別記事一覧ページや、iframes.jsをアップロードするために、レンタルサーバーを借りておくことが必要です。
レンタルサーバーが無ければこのカスタマイズは出来ません。
やりたいと思う方はほとんどいないとは思うのですが、念のため（笑）。

超大事な追記：
すみません。ものすごく間抜けな状態になっていました。

呼び出したiframeの中にあるリンクをクリックすると、iframeの中にサイトが表示されるという状態になっていました。
マジであせりました（泣）。
どうすればいいのか右往左往しましたが、以前どこかでリンクを開く際に、target="_parent"というものがあったことを思い出しました。

ひょっとしてこれは、親ウインドウにリンクを開いてくれるのではないか！？と思ってわらにもすがる思いで試したところ、~~備後！~~ ビンゴ！

60ページに及ぶ修正を行いました。でも、Dreamweaverで結構さくさく修正できたので、楽でした。これを手動でやらなければならなかったら・・・と思うと冷や汗ものです。

各ページ、下記のように修正しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>タイトル</title>
<style type="text/css">

</style>

</head>
<body>
<ul>
<li><a href="http://afiliate.livedoor.biz/archives/000001.html" target="_parent">サンプル1</a></li>
<li><a href="http://afiliate.livedoor.biz/archives/000002.html" target="_parent">サンプル2</a></li>
</ul>
</body>
</html>

変な表示がされてるなあ、と思われた方、すみません。お騒がせしました。

調子に乗って、JavaScriptを使って同様の手法で、サイドバーにカテゴリーのリンクも作りました。

│clip! │ブログカスタマイズ

このBlogのトップへ │前の記事 │次の記事