五右衛門
テンプレート講座 1
第 1 章
●五右衛門テンプレートの段落について
五右衛門のテンプレートを理解する場合には、記事設定画面にあるアウト ラインボックスとの兼ね合いを常に意識する必要があります。
記事設定のアウトラインボックスにある一行がテンプレートではひとつの 段落を作成します。
そして、五右衛門の作成する記事は「段落」の集まりです。
五右衛門の段落は、以下の部品で構成されます。
「段落タイトル」
「画像」
「アフィリエイトURL」
「動画コメント」
但し、
＊yourfihostの段落には「段落タイトル」がありません。
＊RSS記事とランダムリンクには「画像」がありません。
そして、yourfilehostの動画コメントは、
yourfilehostの動画へのURL ダミーリンク
で、構成されます。
これを最初に理解して下さい。
五右衛門テンプレートの「段落」とは、記事設定アウトラインボックスの一 行から作られる一つの記事である。
第 2 章
段落は、記事設定のアウトラインボックスの各行に対応します。
段落は、以下の部品で構成されます。
段落 ・タイトル ・画像 ・URL ・コメント
でも、以下の段落には含まれない部品もあります。
yourfilehost段落にはタイトルがありません。
RSS段落には画像がありません。
ランダムリンク段落には、画像とコメントがありません。
ここまでは、よろしいですか？
五右衛門の作成する記事は、段落の集まりです。
五右衛門の段落はパーツで構成されています。
タイトル、
URL コメント 画像
が基本パーツですが、記事により欠けているパーツがあります。
第 3 章
●「段落にはオーダー番号が付きます」
オーダー番号は、記事アウトラインボックスの並びで一番上が
「1」で順番に最後まで番号付けされます。
この番号がテンプレートの「template order=1」に対応します。
それでは、実際の記事部分を作成し、それを基にテンプレート化する手順をご説明 します。
それでは記事の基になる材料を仕入れましょう。
10 月 7 日(日本時間)のカリビアンコムの最新動画のページから取り込むことにしま す。
7色アナルコネクション 桜井梨花
http://www.caribbeancom.com/moviepages/100609-183/index.html にアクセスして下さい。
メモ帳か三成でご紹介したエディタを開いて下さい。
タイトルの「7色アナルコネクション 桜井梨花」をコピペします。
コメントの部分もコピペします。
ブラウザのアドレスバーに表示されているURLもコピペします。
画像は、下記URL部分のムービーIDを今回は 100609-183として http://www.caribbeancom.com/moviepages/ムービーID/images/l.jpg http://www.caribbeancom.com/moviepages/100609-183/images/l.jpg にアクセスして、保存して下さい。
以上で、五右衛門の段落を構成するパーツである、
タイトル 画像 URL コメント
を用意することが出来ました。
第 4章
用意した五右衛門の段落パーツを確認します。
1． タイトル
「7色アナルコネクション 桜井梨花 」
2． 画像
自分のPCに保存して下さい。
3． URL
本当はアフィリエイトURLなのですがデザイン用に通常のURLを使用 http://www.caribbeancom.com/moviepages/100609-183/index.html
4． コメント
桜井梨花ちゃんの初二穴チンポ同時挿し＆連続アナル中出しファック作 品！まずは原色ローションまみれで止め処なく梨花ちゃんを襲う絶頂おもち ゃ攻め！更には４連続ぶっかけに更に、さら～に！驚異の３Ｐならず、４Ｐ 連続アナル中出しで梨花ちゃんのアナル崩壊寸前！「だぁめぇ…」といいな がらしっかりオマンコを濡らしアナルまで広げちゃうエロいお姉さん!人は見 かけに寄りませんの～！（ドリームルーム社提供配信：カリビアンコムアド バイザー）
HTMLエディタを起動します。
ホームページビルダー、DreamWeaverでも慣れているものが一番です。
HTMLエディタをお持ちでないのであれば、
HTML Project2
http://homepage3.nifty.com/tkaneto/hproj2/htmlproject2.html が無償で使えますので、ダウンロード後インストールして下さい。
では、どんなデザインにしましょうか？
テーブルを使うと表示が崩れにくいですが、自由度が低いのが欠点ですし、
スタイルシートを使い自由にデザインするには HTMLと CSS の知識が必要に なります。
HTML とスタイルシートについては、今後絶対に必要な知識ですので少しず つですが説明していきます。ご存じの方は読み飛ばして下さい。
今回は以下のような表示を目指すことにします。
段落１のタイトル
段落１の 画像
段落２の画像 (リンク付き)
段落３の画像 (リンク付き)
段落4の画像 (リンク付き)
段落5のタイトル
段落5の 画像
ランダムリンク１ ランダムリンク２ ランダムリンク３
2行目の段落２，段落3、段落4については、タイトルとコメントを使いません。
こんな複雑なのが出来るのでしょうか？
段落１のコメント
段落5のコメント
HTMLで表を表現するためにテーブルと呼ばれるタグがあります。
テーブルの中には行と列があり、線で区切られた最小の四角い部分をセルと 呼びます。エクセルなどの表計算と呼び方は同じです。
そして、隣りあったセルは結合することができます。
今回のデザインのテーブルは、3 列・4行のテーブルで1行目、3 行目、4行 目は横3つのセルを結合しています。
HTMLでは、テーブル全体を表すタグは
<table> ~ </table>
です。
<>で囲まれたものをタグと呼びます。タグは開始タグと終了タグが必ずペア
になります。テーブルタグの場合には、<table>が開始タグで</table>が終了タ グになります。
開始タグである<table>に属性と呼ばれるテーブルの定義を足すこともでき ます。
例えば、テーブルの幅を指定する「width」、罫線の太さを指定する「border」 などです。
今回は、テーブルの幅を400pxに、罫線の太さを1pxに指定します。
HTML のタグは書いているうちに自然と覚えますので、焦らず毎回確認する ことをお奨めします。
以下は、沢山の人が HTML を勉強したサイトです。HTML Project2のヘル プからも表示できます。
とほほのHTML入門
http://www.tohoho-web.com/www.htm
では、HTML Project２にテーブルを作成します。
メニューの「タグ」-「テーブル」-「テーブル」を選択します。
テーブル作成用のウィンドウが開きます。
テーブルの幅と罫線の太さを指定します。
「セル」タブをクリックしてセルの設定を行います。
今回は4行、3列のテーブルを作成しますので、行数と列数を指定します。
下のペインにソースコードが自動的に挿入されます。
1行目の横３つのセルを結合します。
マウスで1行目のセルを3つ選択します。
1行目のセル3つを選択状態にしたら、「セル結合」ボタンをクリックします。
同じように、3 行目も横3つのセルを選択状態にして、「セル結合」ボタンをク リックします。
今度は4行目のセルを横に3つ選択し、「セル結合」ボタンをクリックします。
完了したら、「OK」ボタンをクリックします。
テーブルが完成しました。
出来上がったソースコードを見てみましょう。
左端の番号は行番号です。
1行目 テーブルの開始タグで border罫線の太さ、width幅の属性を指定
2行目 <tr> は行の開始タグです。
3行目 <td>は、その行でのセルの開始タグです。3つのセルの結合を意味する
colspan=”3”の属性が指定されています。</td>はセルの終了タグです。
4行目 </tr>は行の終了タグです。
5行目 テーブル2行目の行の開始タグです。
6行目 セルが開始タグと終了タグのペアで3つあり、セルが3つあると指定 7行目 テーブル2行目の終了タグ
8行目 テーブル3行目の開始タグ
9行目 セルの開始タグで3つのセルを結合する指定と終了タグ 10行目 テーブル3行目の終了タグ
11行目 テーブル4行目の開始タグ
12行目 セルの開始タグ3つのセルを結合する指定と終了タグ 13行目 テーブル4行目の終了タグ
14行目 テーブルの終了タグ
を意味しています。
では、1行目にデータを入れていきましょう。
1<table border="1" width="400">
2 <tr>
3 <td colspan="3"></td>
4 </tr>
5 <tr>
6 <td></td><td></td><td></td>
7 </tr>
8 <tr>
9 <td colspan="3"></td>
10 </tr>
11 <tr>
12 <td colspan="3"></td>
13 </tr>
14 </table>
セルに書き込むのは、開始タグと終了タグの間に記述します。
3行目の<td colspan=”3”> ここにセルの中身を記述 <td>
最初にタイトルを記述します。
<td colspan=”3”>7色アナルコネクション 桜井梨花<br /></td>
<br />はHTMLの改行を意味します。いくらソースコードを改行してもブラ
ウザは無視します。
ソースコードも表示と合わせたいので、改行します。
<td colspan=”3”>7色アナルコネクション 桜井梨花<br />
</td>
次に画像を挿入します。</td>の前にカーソルを置きます。
メニューの「タグ」-「リンクと画像」-「埋め込み画像」を選択します。
画像設定のウィンドウが開きます。
設定するのは、一番上の「src-画像のリンク先」と5行目の「width-幅」9行
目の「align-配置」です。
画像のリンク先を指定するときには、右端のボタンをクリックするとファイ ルの選択ダイアログが表示されるので、保存した画像ファイルを指定して下さ い。
画像の幅は、テーブル全体が400pxなので180pxにしてみましょう。5行目 に180を指定します。
配置は、画像が左側でコメントの文章が右側にくるようにしますので、ここ では、「left」を指定します。
以上の設定が完了すると「OK」ボタンをクリックします。
メイン画面の下のペインにプレビューが表示されます。
最後にコメントを挿入します。
</td>の前にカーソルを移動して下さい。
メニューの「タグ」-「レイアウト」-「段落」を選択します。
HTMLの段落を意味する<p>タグが終了タグの</p>と挿入されます。
<p> ここにコメントをコピペします。</p>
下のペインのプレビューにもすぐに反映されます。
次に2行目に移ります。
2行目は、画像のみですから<td></td>の間に先ほどと同じ要領で3回画像を 挿入します。
但し、テーブルの幅は400pxですので画像の幅は130pxにします。
では、最初の</td>の前にカーソルを移動して、画像を挿入します。
2 行目は文章を挿入しませんので、「align-位置」をしていする必要はありま せん。
プレビューに反映されましたか？
次に3行目ですが、1行目と同じ作業をして下さい。
・ タイトルを挿入
・ 改行を挿入
・ 画像を挿入
・ Pタグを挿入
・ コメントを挿入 できましたか？
最後の4行目は、ランダムリンクです。
とりあえずタイトルと改行を挿入します。
改行は、メニューの「タグ」-「レイアウト」-「改行」の操作でも構いません。
<td colspan=”3”>
7色アナルコネクション 桜井梨花<br ./>
7色アナルコネクション 桜井梨花<br ./>
7色アナルコネクション 桜井梨花<br ./>
</td>
となります。
できましたか？
メニューから改行を挿入すると<br>が挿入されますが、私は<br />と書いていま
す。<br>には終了タグがないので、以前は<br>でしたが、HTMLの規格が新しくな
るにつれて、終了タグを必要とするようになります。
終了タグがないものについては、最後に「/」をつけて終了タグの代わりにするこ とで、開始タグと終了タグとでペア扱いになります。
改行の<br />以外にも今回つかった画像埋め込みタグの<img>も終了タグがあり ません。
いまのうちから終了タグをつける習慣を身につけましょう。
ここまで完成しましたが、何が足りないのでしょうか？
はい、リンクが一切はいっていません。
これからリンクを挿入していきます。
テーブル1行目の
タイトルにリンクを付けます。
ソースコードのタイトル部分を選択します。
用意していたURLをコピーします。
メニューの「タグ」-「リンクと画像」-「ハイパーリンク」を選択します。
表示されるアドレスを選択し「Enter」キーで決定します。
リンクタグ<a></a>が挿入され、リンク先の参照を「href」属性で指定します。
ブラウザの新たなウィンドウで開くように「target=”_blank”」を追加して下 さい。
以上でタイトルにリンクが挿入され、タイトル部分は、
<td colspan="3"><a
href="http://www.caribbeancom.com/moviepages/100609-183/index.html">
7色アナルコネクション 桜井梨花</a><br />
と、なります。
1行目の画像にもリンクを貼りましょう。
画像を示すタグ <img src=”…….” > を選択状態にします。
選択状態になりましたら、メニューの「タグ」-「リンクと画像」-「ハイパー リンク」を選択し、表示されるURLを選択して「Enter」で決定します。
同じように、
テーブル2行目の３つの画像 テーブル3行目の
タイトル 画像
テーブル4行目の
タイトル 3つにリンクをつけて下さい。
以上で完成です。
次回は、このソースコードを五右衛門のテンプレートに変換します。
ご質問は、サポートSNSの「五右衛門テンプレート講座への質問」トピにお 願いします。
第 5章
前回までの講座はいかがでしたでしょうか？
他の方と差別化するためには、独自の五右衛門テンプレートを作成するのが 一番です。
さて、前回作成したHTMLをエディタで開いて下さい。
前回の講座は、
http://easy.affiliate-powertools.com/report/template_s1.pdf 無償で使えるエディタでお奨めは、
テラパッド
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html です。
今回のHTMLから五右衛門テンプレートの作成手順です。
1． テラパッドで前回作成したHTMLを開きます。
2． タイトル部分を五右衛門タグに変換します。
3． イメージ部分を五右衛門タグに変換します。
4． リンク部分を五右衛門タグに変換します。
5． コメント部分を五右衛門タグに変換します。
6． 段落番号を振ります。
以上で完成です。
1．テラパッドで前回作成したHTMLを開きます。
2．タイトル部分を五右衛門タグに変換します。
今回使用したタイトルは「7色アナルコネクション桜井梨花」ですので、
これをタイトルを表す五右衛門タグ「<!--title-->」に一括置換します。
1) タイトルの「7 色アナルコネクション桜井梨花」部分を選択状態にしま す。
2) メニューの「検索」-「置換」を選択します。
3) 「置換後の文字列（R）」に「 <!—title--> 」を入力します。
4) 「すべて置換」ボタンをクリックします。
一件ずつ確認が表示されますので、「はい」をクリックして全て置換し
ます。
3．イメージ部分を五右衛門タグに変換します。
画像を表示する HTML を五右衛門の画像タグ<!--imageUrl-->に変換しま す。HTMLの画像部分は、
<img src=”xxxxxx~” width=”xx” ~ >
です。
しかし、変換する部分は「src=”ここだけ”」です。
1) イメージタグ部分を選択状態にします。
両端の「“」が選択状態にならないように気をつけて下さい。
2)メニューの「検索」-「置換」を選択します。
3) 置換後の文字列に「 <!--imageUrl--> 」を入力します。
4) 「すべて置換」ボタンをクリックします。
確認のダイアログで表示されますので、今度は「すべて」をクリッ
クして一度で置換します。
4．リンク部分を五右衛門タグに変換します。
続いてリンク部分の<a href=”・・・”>を五右衛門タグの<!--url-->に置換し ます。
今回も「href=”XXXXX”」のXXXX部分だけを置換しますので、両端の「”」
が選択部分に掛からないように気をつけて下さい。
1) リンクのファイル名をしている部分を選択します。
<a href=” 以降のhttp://から選択します。両端の「“」が選択範囲に含まれ
ないように気をつけて下さい。
2）メニューから「検索」-「置換」をクリックします。
3）置換後の文字列に「 <!--url--> 」を入力します。
4) 「すべて置換」ボタンをクリックします。
確認ダイアログが表示されますので「すべて」ボタンをクリックします。
5．コメント部分を五右衛門タグに変換します。
コメント部分を五右衛門タグの<!--description-->に置換します。
1) コメント部分を選択します。今回は<p>と</p>の間になります。
2) メニューの「検索」-「置換」を選択します。
3) 置換後の文字列に「<!--description-->」を入力します。
4)「すべて置換」ボタンをクリックします。
確認ダイアログが表示されますので、「すべて」ボタンをクリックします。
4) 一度に置換出来る置換元は128文字のようですので、残った部分を今度は 何も文字を入力しないで置換します。
5) 残った部分を選択状態にします。
5) メニューの「検索」-「置換」を選択します。
6) 置換後の文字の欄を空欄にします。
7) 確認ダイアログが表示されますので、「すべて」をクリックします。
以上で五右衛門タグへの置換は完了です。
6．最後に段落番号を振ります。
五右衛門の記事設定の記事アウトラインの行番号が段落番号となります。
今回は
段落番号１ 画像付き記事 段落番号２ 画像付き記事 段落番号3 画像付き記事 段落番号4 画像付き記事 段落番号5 画像付き記事 段落番号6 ランダムリンク 段落番号7 ランダムリンク 段落番号8 ランダムリンク と、なります。
五右衛門タグに置換されたHTMLを示します。
<table border="1" width="400">
<tr>
<td colspan="3"><a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a><p><!--description--></p></td>
</tr>
<tr>
<td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td><td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td><td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td>
</tr>
<tr>
<td colspan="3"><a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a><p><!--description--></p></td>
</tr>
<tr>
<td colspan="3">
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><!--title--></a><br />
</td>
</tr>
</table>
段落番号１
テーブルデータ1行目の3つのセルを結合した
<td colspan=”3”> ~ </td>
の間に段落1のデータが入ります。
五右衛門が取得した
タイトル → <!—title-->
画像のURL → <!--imageUrl-->
アフィリエイトリンク → <!--url-->
ムービーコメント → <!—description-->
と置換されます。
では、テーブルデータ1行目にの置換元のデータに段落番号を付けます。
<td colspan=”3”><!--template order="1"--> ~ <!--/template--></td>
となるように、段落番号開始タグが<!--template order="1"-->であり、終了タ
グが<!--/template-->になります。
但し、五右衛門の段落開始タグと段落終了タグは一行にそのタグのみしか書け ません。
上記は、
<td colspan=”3”>
<!--template order="1"--> 段落開始タグ以外を書いてはいけません。
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a><p><!--description--></p>
<!--/template--> 段落終了タグ以外を書いてはいけません。
と、なります。
五右衛門は変換作業を行う際に、一行ずつ作業を行います。
開始タグに出会うまでは、テンプレートの行をコピーするだけで置換しませ ん。開始タグに出会うと、五右衛門タグを取得したデータと置換します。
終了タグに出会うと、置換するのを止めます。
段落番号2～4
段落番号２～４は画像付きの記事ですが、画像とアフィリエイトURLしか 使いません。
テーブル2行目の各セルに入っている五右衛門タグに段落番号を付けます。
<tr>
<td>
<!--template order="2"--> 段落番号が2になっています。
<td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td>
<!--/template--> 段落終了タグ以外を書いてはいけません。
<!--template order="2"--> 段落番号が3になっています。
<td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td>
<!--/template--> 段落終了タグ以外を書いてはいけません。
<!--template order="2"--> 段落番号が4になっています。
<td><a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a></td>
<!--/template--> 段落終了タグ以外を書いてはいけません。
</tr>
段落5
段落番号5はテーブルデータ1行目と同じです。
置換した五右衛門タグを段落開始タグと段落終了タグで囲みます。
段落開始タグと段落終了タグの前後を改行します。
<td colspan=”3”>
<!--template order="5"--> 段落番号が5になっています。
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a><p><!--description--></p>
<!--/template--> 段落終了タグ以外を書いてはいけません。
段落6～8
段落6～8はランダムリンクになります。
それぞれの行を段落開始タグと段落終了タグで囲い、段落開始タグ、段落 終了タグの前後を改行します。
<td colspan="3">
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><!--title--></a><br />
</td>
それぞれの段落を段落開始タグと段落終了タグで囲みます。
<td colspan="3">
<!--template order="6"--><a href="<!--url-->"><!--title--></a><br /><!--/template-->
<!--template order="7"--><a href="<!--url-->"><!--title--></a><br /><!--/template-->
<!--template order="8"--><a href="<!--url-->"><!--title--></a><br /><!--/template-->
</td>
段落開始タグと段落終了タグの前後に改行を入れます。
<td colspan="3">
<!--template order="6"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
<!--template order="7"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
<!--template order="8"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
</td>
以上で完成です。完成したものを載せておきます。
<table border="1" width="400">
<tr>
<td colspan="3">
<!--template order="1"-->
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a>
<p><!--description--></p>
<!--/template-->
</td>
</tr>
<tr>
<td>
<!--template order="2"-->
<a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a>
<!--/template-->
</td>
<td>
<!--template order="3"-->
<a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a>
<!--/template-->
</td>
<td>
<!--template order="4"-->
<a href="<!--url-->"><img src="<!--imageUrl-->" alt=""
width="130"></a>
<!--/template-->
</td>
</tr>
<tr>
<td colspan="3">
<!--template order="5"-->
<a href="<!--url-->"><!--title--></a><br />
<a href="<!--url-->"><img src="<!--imageUrl-->" alt="" width="180"
align="left"></a>
<p><!--description--></p>
<!--/template-->
</td>
</tr>
<tr>
<td colspan="3">
<!--template order="6"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
<!--template order="7"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
<!--template order="8"-->
<a href="<!--url-->"><!--title--></a><br />
<!--/template-->
</td>
</tr>
</table>
これで記事を作成した画面を最後に載せておきます。
テーブル1行目のムービーコメントが長すぎてバランスが悪いのですが、最 初のデザイン通りに完成しました。
