Open Quick Homepage Maker(Open-QHM)で始める簡単楽々ホームページ作成

アフィリエイトリンクの貼り方 　

文中に文字リンクを埋め込む 　

　アフィリエイトリンクでも、紹介文とリンクURLだけのものなら、リンクが長くても、普通のリンクと同じように文中にそのまま埋め込むことができます。たとえば、「ポータブルナビ」。こんな感じです。
　これは、こうやって書いています。

　ただし、楽天では、リンクは基本的に書き換えてはいけないことになっています。これを使ってリンクを作った場合、新しいページからリンクを開く命令の「 target="_blank"」という指示が入りません。おそらくそれでも問題はないような気はしますが、気になる人は、別のやり方を考えなければなりません。
　気になる人は、文字リンクについても、下の〔画像を文や表中に埋め込む〕を見てくださいね。

URLに日本語が入っている 　

　URLに日本語が入っている場合、Ver3以前は、リンクを直接書いても、うまく思うところに飛んでくれるリンクになりませんでした。
　Ver4になって、文字コードがUTF-8になったお陰で、このようなアドレスもそのまま書いて、きちんとうまくリンクが作成されるようになったようです。

　Ver3時代や、UTF-8の文字コードを採用していない短縮URLソフトShortURL AccessAnalyzerなどでは、漢字アドレスをそのまま書いても、そのままではうまく飛んでくれないので、そんな場合は、URLをピュニコード(Punycode)というものに変換するとうまくいきます。
　上にリンクしたページで、「変換モード」を「URL」にして、[更新]を押します。
　たとえば、「http://ja.wikipedia.org/wiki/Unicode一覧_0000-0FFF」というリンクの場合、「http://ja.wikipedia.org/wiki/Unicode%e4%b8%80%e8%a6%a7_0000-0FFF」とするときちんと指定したURLに飛んでくれます。

画像付きアフィリエイトリンクの場合 　

　このページ右のメニューバーに貼ってあるGoogle Adsenceのように、位置指定する必要がないものは、

と指定するだけで入れることができます。

　下の簡易編集支援アイコンの[HTML]のボタンを押すと、雛形が挿入されて便利です。
　実際の記入時には、（　）は書きません。

　しかし、アフィリエイトリンクの使い方で多いのは、左右にリンク画像を表示して、文字を回り込ませるようなやりかたです。これをするのに、上の記述に追加して、

の様にしたり、

の様にしたりしても、Internet Explorerでは、画像の後に改行が入り、うまく後の記事が回り込んでくれません。

　有料版のサポ－トにも、 <div align="right"> の様に記述を入れる旨の説明があるのですが、実際にはそれではうまくいきません。

　そこでちょっと面倒ですが、coler.cssかlayout.cssどちらかに、たとえば

というようなクラス名で追加の指定を書き加えておいて、（マーカー部分の、ドットの後に続くのが定義するクラス名です。）

の様に定義したクラス名でdivを指定すると、右に挿入されたリンクのようにInternet Explorerでもうまくいくようです。
　ここでCSSファイルに書き加えたような、自分が追加したクラスの定義は、ファイルの一番下にでもまとめて書き加えておくと、今後のバージョンアップなどの時にも比較的手軽に対応できるでしょう。

〔CSSの書き換え方〕
　ファイル書き換えの手順の要領で、自分のパソコンでファイルを書き換え、サーバーにアップロードします。
〔</div>を書き忘れたりすると〕
　この</div>というのを入れ忘れたりすると、ページ全体のブロック要素の指定がおかしくなり、メニューが下になるなど正常に表示されなくなりますから注意してください。

HTMLを使わずに、画像のアフィリエイトリンクを表示する。 　

　画像のURLが、.pngや.jpgで終わるのなら、&attachref();や&ref()などを使って画像を貼り付けることができるのですが、楽天のアフィリエイトリンクの画像の場合などでは、その後に更に付属の文字がくっついているので、これらを使って画像表示することができません。
　それはこれらの機能を実現しているプラグインが、画像かどうかを、ファイルの最後の拡張子（.pngや.jpgの部分）で判断しているからです。
　そこで画像かどうかの判断をもっと柔軟性を持たせて判断させるためには、\pluginの中にあるref.inc.phpの下のマーカー部分を書き加えてアップロードします。

　これで、文末に少々他のものが付け加わっていても、".gif"、".png"、".jpeg"、".jpg"などがあれば画像だと認識してくれるようになります。これだけで&attachref();も同じ画像ファイル判定になります。
　但しこうすることは、画像の判定に柔軟性を持たせる分、変なファイルを指定をすれば、何か障害を発生する元にもなりかねないので、改造する場合は自己責任でお願いします。

Google Adsenceの導入 　

　Google Adsenceを貼り付けるには、横のメニューの所は、上で説明したとおり、メニュー管理からサイドメニュー編集画面に行って、下の簡易編集支援アイコンの[HTML]のボタンを押し、その中にアフィリエイトリンクを挿入するだけです。リンクを作るときに、背景色をメニューの背景色に合わせます。
　下のAdsenceは、北摂情報学研究所推奨のように[ナビ２編集]の所に入れると、ページごとにタグを貼り付ける面倒が無くて便利です。しかしそれでは、表示を中央に寄せても、ページ全体の中央になってしまい、コンテンツの中央からははずれるので不格好です。
　また、コンテンツが少なく、メニューが縦長の場合にも、長くなったメニューの更に下にアドセンスの表示だけがさらに伸びて表示されるので不格好です。
　ですから、ページ上と下のアドセンスは、ページの内容編集の所に[HTML]で貼り付けることで対応するのが簡単です。新規ページを作るときに、アドセンスを貼ったページを雛形として読み込むことで、そのページに簡単入力します。
　アドセンスの表示を中央寄せするためには、

とします。実際の記入時には、（　）は書きません。

Google Adsenceを一回の貼り付けだけですますには、 　

　\skin\hokukenstyleにあるpukiwiki.skin.phpを書き換えます。

の黄色マーカーの部分に、

をそれぞれ挿入します。こうすれば、各ページにリンクを貼り付けることなく、一度の設定で、アドセンスが表示されるようになります。
　なお、下のリンクについては、私はあまり複雑な使い方をしないので、今のところここで良いと思っていますが、他の表示とのかねあいで、位置を変えた方がいい場合は、ソースを見て、挿入位置を適宜判断してください。

画像を文や表中に埋め込む 　

　ここまでのところで、アフィリエイトの画像やリンクをHTMLのタグのまま、Quick Homepage Makerに貼り込むやり方について、基本的な考え方を説明してきました。
　しかしこのような「#html{{」を使うやり方では、ブロック要素となってしまうので、同じ行に文字を入力することができず、下の見本のように、文や表中にリンクを埋め込むことができません。
　ページの左右にリンクを表示するだけでなくて、やっぱり表の中にもアフィリエイト画像を表示して、説明したいですよね。
　フルパッケージの説明には、楽天のアフィリエイトOKというようなことが書いてあって、「無料だから、できないだろう」で我慢するのはどうも納得がいかないので、対処法を考えてみました。

　でも、「フルパッケージ」の楽天アフィリエイト対応というのは、HTMLを使ってリンクを貼り付けるだけだったようで、真相を知ってしまうとちょっと拍子抜けです。「誇大宣伝」=「羊頭狗肉」だったようですね。
　でもそのために、貧乏パワーの負けじ魂が炸裂したので、よしとすることにします。

rakutenプラグインの見本 　

&rakuten(URL,説明,IMGURL,right);	&rakuten(URL,説明,IMGURL,center);	&rakuten(URL,説明,IMGURL,left);
右に寄せて、文章は回り込ませる設定です。	これは、 中央に表示します。回り込みはありません。	左に寄せて表示しています。文字は回り込んで表示されます。 文字のリンクは「ポータブルナビ 」の様に入れます

rakutenプラグインの導入 　

　 Nekyoさんの『プラグイン/自作/pyp/rakuten』のプラグインを使わせてもらって、これを元に改造しました。
　ダウンロードにはパスワードが必要ですので、メンバー登録してからダウンロードしてくださいね。
　導入法は、ダウンロードしたプラグインを、無変換textモードで、/pluginフォルダにアップロードして、後は、〔画像付きアフィリエイトリンクの場合〕で説明したのと同じく、coler.cssかlayout.cssどちらかに、たとえば

というようなクラスを追加して指定しておくだけです。（マーカー部分の、ドットの後に続くのが定義するクラス名です。）
　このプラグインのディフォルト（書き換えないときの現状）のクラス名は、「right」「left」にしてあります。別の名前にしたい人は、プラグインの最初の所に定義するところがありますから、そこをEUC対応エディタで書き換えてアップロードしてください。

rakutenプラグインの基本書式 　

rakutenプラグインの使い方１　画像 　

　たとえば、上のリンクの例では、rakutenから発行されるアフィリエイトのタグはこのようになっています。

　この黄色マーカー部分の最初の方を第１因数に、後の画像へのリンクを第３因数に指定します。
　なお最近のrakutenのリンクでは「alt= ""」という部分は無くなったのでしょうか。この部分が有れば、""で囲まれた部分を第２因数にします。
　文字の回り込みを指定しない場合は、これだけで、文字の回り込みをしたい場合は、〔left | center | right 〕の中から第４因数を指定します。
　たとえば、この例では、画像の説明はないので、第２因数はなしで、

のように指定します。
　このような指定をすることで、「target="_blank"」「 border="0"」の指定がリンク中に自動で入ります。

rakutenプラグインの使い方２　テキスト 　

　このrakutenプラグインの第２因数までを指定することで、テキストリンクを作ることができます。この場合、第２因数に指定した文字列が、ホームページ上に表示される文字列となり、その文字列に第一因数のURLに向かってリンクが貼られます。
　このプラグインを使うことで、「target="_blank"」「 border="0"」が挿入されたrakuten提供のテキストリンクと同じものをホームページ上に貼ることができます。
　なおこの場合、文中にリンクを挿入する様になりますから、書式２の方を使ってくださいね。

rakutenプラグインの用途 　

　名前は、rakutenプラグインとなっていますが、最初の発想が「楽天のアフィリエイトリンクをうまく表示できないか」という所から作られているだけで、以上の説明を読んでいただければ、楽天だけに限らず、文字や画像をホームページ上に貼り付けて、リンクは別ページで開くような使い方をする用途に広く使える、とても便利なプラグインであることが分かると思います。

Amazonで本を画像付きで紹介 　

とりあえずタグをHTMLで貼り付け 　

　amazonのアフィリエイトリンクを貼る方法は、色々あるようです。
　これが、amazonが発行するタグを、素直にHTMLで出力したものです。
ここではさらに、<div class="right"></div>で囲んであります。

本体組み込みのプラグイン 　

　この方法は、アマゾンのプログラムが変わって、使えなくなっているようです。

という風にやっていました。

amazletを使う１ 　

画像リンク	説明
	PukiWiki入門 まとめサイトをつくろう!の紹介です。

　amazletでできる、「イメージリンク」「テキストリンク」は普通のリンクなので、リンクのそれぞれの部分を、Quick Homepage Makerの画像貼り付けと、リンクの指定場所に当てはめれば、上のような表でも作ることができます。

amazlet+rakutenプラグイン 　

　こういう使い方ができるということは、上の楽天プラグインも使えそうですね。これが一番楽に使えて、しかも高機能でしょう。

rakutenプラグイン	こうやって画像リンクを回り込ませて、文字の中のにも、『PukiWiki入門 まとめサイトをつくろう! 』のように、リンクを入れます。 　これでは文字が少なすぎて回り込みが分からないので、下にも同じように、貼り付けて見ますね。
ソース見本	&rakuten(http://www.amazon.co.jp/exec/obidos/ASIN/4798109223/****-22/ref=nosim/,PukiWiki入門 まとめサイトをつくろう!,http://ecx.images-amazon.com/images/I/614V602P6VL._SL160_.jpg,right);　こうやって画像リンクを回り込ませて、文字の中のにも、『&rakuten(http://www.amazon.co.jp/exec/obidos/ASIN/4798109223/****-22/ref=nosim/,PukiWiki入門 まとめサイトをつくろう!);』のように、リンクを入れます。 　これでは文字が少なすぎて回り込みが分からないので、下にも同じように、貼り付けて見ますね。

amazletを使う３　枠＋HTML 　

PukiWiki入門 まとめサイトをつくろう!

posted with amazlet at 09.03.21

増井 雄一郎 天野 龍司 大河原 哲 miko
翔泳社
売り上げランキング: 78550

おすすめ度の平均:

セキュリティに弱点!
入門書としては最適
PukiWiki入門卒業のために
これだけでOK
リファレンスとして使える

Amazon.co.jp で詳細を見る

(レビューあり)

PukiWiki入門 まとめサイトをつくろう!

posted with amazlet at 09.03.21

増井 雄一郎 天野 龍司 大河原 哲 miko
翔泳社
売り上げランキング: 78550

Amazon.co.jp で詳細を見る

(レビューなし)

　これは、amazletというサービスを使ったものです。別にアマゾン発行のリンクでもかまいませんが、ここで発行されるリンクを、さらに<div class="right">　</div>などで囲んで、さらにその外をもう一度<div class="graybox3">　</div>で囲み、それをHTMLで出力すると、こうなります。
　さらにこのサービスで発行されるテキストリンクを使って、『PukiWiki入門 まとめサイトをつくろう!』の紹介です、というようなリンクもできます。　ただし、これはもろ、HTMLの世界ですから、Quick Homepage Makerに頼ってホームページを作るしかないユーザーには敷居が高いかもしれません。

amazletを使う４　枠＋HTML２ 　

　Quick Homepage Makerでは、枠(#style)の中に、#HTMLを使うことができません。それで上のようにすべてをHTMLのタグで書いたのですが、枠の中で使うことのできる、#HTML2()というタグも用意されています。
　これを使って、上と同じことをすることもできます。

　ただし、#html2(　）のかっこの中には、改行を一切含んでいない、一文を入れます。
　そのためには、HTMLソースに含まれている改行を、プログラムを使って、取り除く必要があります。プログラムは、北摂情報学研究所が無償で用意してくれているので、むづかしいことではありません。
　しかし、これをすると、ページソースが、何を書いているのやら訳が分からなくなります。試行錯誤して、「あ！ここのこの記号が抜けていた」とやるのには、とっても苦しいですね。
　そんなことなら、上のように、#htmlを使って出力した方が、却って使い勝手がよいような気がします。
　

アフィリエイトリンクを別ファイルにする 　

　上のようなデータを毎ページ貼り付けてもいいわけですが、結構アフィリエイトリンクは長くてうっとおしいので、たとえば「google」などというページを別に作ってそこにリンクの内容を書いておき、リンクを入れたい場所に

のように記述してこのファイルを読み込むと、編集画面がかなりすきっきりします。

　しかしこの方法だと、１つのページで同じリンクを２回読み込むとエラーになる仕様になっているようです。

〔エラー表示〕
#include(): Included already: full-right

　これは、/plugin/include.inc.phpの86行目あたりにある、2回目以降の読み込みのスキップ処理（黄色のマーカー部分）を//でコメントアウトしてやれば、一応は何回も読み込めるようになります。
　ただし、私もプログラムのことは生わかりでいじっているので、この操作でどのような支障が出るのか出ないのか、また、このプラグインをどのようにOpen-QHM内で使っているか全く分かりませんので、どこか私の分からないところで支障が出るかもしれません。
　改造する場合は、自己責任でお願いします。

// I'm stuffed
　　if (isset($included[$page])) {
//　　　　return '#include(): Included already: ' . $link . '<br />' . "\n";
　　} if (! is_page($page)) {
　　　　return '#include(): No such page: ' . $s_page . '<br />' . "\n";
　　} if ($count > PLUGIN_INCLUDE_MAX) {
　　　　return '#include(): Limit exceeded: ' . $link . '<br />' . "\n";
　　} else

短縮URLソフト 　

　フルパッケージの場合、Ver3.0から、標準でURL短縮ツールがついてくるようになりました。しかし、無料のでがんばろうという人は、アフィリエイトIDをもろに出したくないなどの理由で、短縮URLを使いたい場合、別にURL短縮ツールを導入する必要があります。

北摂情報学研究所が用意している無料のツール 　

　一番手軽にこの問題に対処するには、北摂情報学研究所が提供するツール・情報の紹介にある「短縮URLを自分で」に紹介されているツールを使います。ここで説明されている要領で短縮URLを作成し、それをリンクとして挿入すると、「例：フルパッケージ」のように、文中にアフィリエイトリンクを入れることができるようになります。
　このツールでできたPHPファイルを、Quick Homepage Makerと同じフォルダ（ディレクトリ）に置いてしまうと何のファイルやら訳が分からなくなります。ですから、その下に[link]というようなフォルダを作って、そこにまとめておくのが良いでしょう。

できたファイルをエディタでのぞいてみると、ツールを使わないでも、リンクの設定は簡単にできそうですね。

独自ドメイン短縮URLシステム　FWD 　

　以前、北摂情報学研究所がアフィリエイト会員になった方を対象に無料配布していいたことがありました。
　有料版には、インストール済みですが、無料版のユーザーの方は、今は使うすべがありません。

ShortURL AccessAnalyzerの体験版 　

　以前xreaでFWDシステムが動かないと右往左往していた時（今は、組み込みのものは当然動きます）、「短縮URL＆高機能アクセス解析ツール　ShortURL AccessAnalyzer｣ というのを見つけました。このソフト自体は有料ですが、その体験版が無料で手に入ります。
　体験版でも詳細なアクセス解析ができないだけで、URL転送自体は、北摂情報研究所のFWDシステムよりいろいろな方法が選べて、しかもアドレスの指定方法も選べるなど高機能です。また詳細なアクセス解析ができないとはいっても、FWDシステム並みの簡易アクセスカウンタは動きます。
　それでxreaでも指定通りの設置をすればきちんと動きますから、わざわざFWDシステムを手に入れなくとも、｢ShortURL AccessAnalyzer｣ の体験版の方が良いでしょう。
　製品版になると、さらに、時間別、曜日別、日別の解析の他、リンク元URLなども分かります。これって最強ですね。

　私の上のリンクから、有料版を購入していただいた方には、購入特典があります。その場合は「購入特典希望」として、メールをお願いします。

Quick Homepage Makerのページごとに組み込まれた短縮URL 　

　Ver4になって、ページごとに、そのページに飛ぶ短縮URLが、使えるようになりました。
　ページ編集画面に表示されるようになったURLがそれです。
　普通は、今まで通り日本語を含んだURLを使えばいいのですが、メルマガなどで、日本語を含んだ長いURLを書くのがうっとうしいような場合には、ここで表示される短縮URLが使ええます。

リンクURLに大文字小文字が混じっているような場合 　

　下のリンクアドレスの例のように、リンクURLに大文字小文字が混じっているような場合、以前は扱いが少し面倒でした。

「行中で、1つ以上の大文字→1つ以上の小文字→1つ以上の大文字→1つ以上の小文字の組合わせからなる半角//文字列はWikiNameにな」ってしまい、外部リンクとして認識してくれなかったからです。
　このような場合は、URL短縮ツールを使うなどして、URLを大文字小文字が混じらない形式にしてしまわなければならなかったのです。
　しかし、Ver4になって確かめてみると、このリンクを普通に作成しても、上の例のように、きちんとリンク先に飛んでくれるようになっていました。
　pukiwiki.ini.phpの設定で、いつの間にかWikiNameの解釈は無効の設定に変更になっているようです。