引き算アフィリ ASP 登録用の日記サイトを 作成しよう 1
目次 ASP 登録用の日記サイトを作成しよう... 3 日記サイト作成時のポイント... 4 (1) 子ページを5ページ分作成する... 5 (2)1 記事当たり600 文字以上書く... 6 (3) アップロードする場所はドメインのトップが理想... 7 日記サイトを作成しよう... 8 日記サイト用テンプレートをダウンロードする... 8 子ページを編集する... 11 トップページを編集する... 31 サーバーにアップロードする... 44 日記サイトを確認する... 50 日記サイトのURLをメモしておこう... 53 2
ASP 登録用の日記サイトを作成しよう ASP に登録するためには 前もってサイトを作成する必要があります サイトと言っても簡単な日記を書いたサイトを作成して頂きます イメージしやすいように 実際に僕が作成した日記サイトを紹介しますね 日記サイト例 http://afi-lab.com/case/k1-015/nikki/index.html のちほど この日記サイトを作成するための テンプレートもお配りします 3
日記サイト作成時のポイント 日記サイトを作成するときのポイントが 3 つあります (1) 子ページを5ページ分作成する (2)1 記事当たり600 文字以上書く (3) アップロードする場所はドメインのトップが理想 他の場所でも問題はない それでは 1 つずつ説明していきますね 4
(1) 子ページを 5 ページ分作成する サンプルサイトを確認すると分かる通り 日記サイトは トップページ と 子ページ から構成されています トップページ から 子ページ へのリンクが貼られており 子ページ に日記記事を書きます この 子ページ を 5 ページ分作成してください つまり 日記記事を 5 つ書くということですね < トップページ > < 子ページ > 日記記事 5
(2)1 記事当たり 600 文字以上書く そして 子ページ 1 記事当たり 600 文字以上の 日記を書いてください 600 文字以上 記事の文字数のチェックは 以下のサイトが便利です 文字数カウント http://www1.odn.ne.jp/megukuma/count.htm 6
(3) アップロードする場所はドメインのトップが理想 日記サイトをアップロードする場所は 独自ドメインのトップ階層が理想です そうすることで 今後作成していく PPC 用のサイト達が この日記サイトの子ページのように見えるからです ただ その他の階層だからといって 審査に落ちることはないと思います 先ほどご覧頂いた日記サイト例は あくまでもイメージということで トップ階層以外の場所にアップロードしています 7
日記サイトを作成しよう それでは 実際に日記サイトの作成方法を説明していきますね 日記サイト用テンプレートをダウンロードする 1 以下の URL から日記サイト用のテンプレートをダウンロードしてください 日記サイト用テンプレート http://afi-lab.com/case/k1-015/nikki-temp.zip 2 nikki-temp.zip というファイルがダウンロードされます 3 zip ファイルなので解凍ソフトで解凍しましょう 1 nikki-temp.zip を左クリックします 2 左クリックしたまま解凍ソフトの上まで移動させます 3 左クリックを離します 1 2 3 解凍ソフトを使わないと不具合の原因になります 必ず解凍ソフトを使って解凍してください 解凍ソフトをお持ちでない場合は下記のページよりダウンロードしましょう Lhaplus http://www.forest.impress.co.jp/library/software/lhaplus/ 8
4 解凍できましたら 日記サイトテンプレート という ファイルが表示されます 5 そして そのフォルダ内に 日記サイト [ サンプル ] と 日記サイト [ テンプレート ] というフォルダが入っています 日記サイト [ サンプル ] には 僕が作成した日記サイトが 入っていますので 参考にしてください ただ そのまま使うのだけはやめてくださいね 9
6 日記サイト [ テンプレート ] フォルダを開きます 7 このようなファイル構成になっています index.html トップページ 001.html~005.html 子ページ img フォルダ style.css 子ページ トップページ 10
img フォルダ と style.css は触らないので気にしなくても大丈夫で す 子ページを編集する まず 子ページを編集します 8 001.html を TeraPad で開きます 1 001.html を左クリックします 2 左クリックしたまま TeraPad の上まで移動させます 3 左クリックを離します 1 2 3 11
9 001.html を TeraPad で開くとこのような画面が表示されます ~ の部分を編集することで子ページが完成します 12
10 001.html を編集する前に現在どのように表示されるのか 確認してみましょう 001.html を Google Chrome で開きます 1 001.html を左クリックします 2 左クリックしたまま Google Chrome の上まで移動させます 3 左クリックを離します 2 1 3 11 するとこのようなページが表示されます それでは実際に 001.html を編集していきます 13
12 まずは サイトタイトル 部分を編集します < サイトタイトルはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 14
1 サイトタイトル 部分を選択します 2 [BackSpace] キーを押し サイトタイトル を消します 前後のタグを消さないように注意すること 3 <title> と </title> の間にサイト名を入力します サイト名は適当で大丈夫です 4 保存ボタンをクリックします 5 GoogleChrome に戻りブラウザの ください ボタンまたは [F5] キーを押して更新して 15
< 編集後 > このようにサイトタイトルが編集されていれば OK です 16
13 もう一箇所 サイトタイトル 部分がありますので そちらを編集します < サイトタイトルはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 17
1 サイトタイトル 部分を選択します 2 [BackSpace] キーを押し サイトタイトル を消します 前後のタグを消さないように注意すること 3 _blank > と </a> の間にサイト名を入力します 4 保存ボタンをクリックします 5 Google Chrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して 18
< 編集後 > このようにサイトタイトルが編集されていれば OK です 19
14 次に ページ 1 タイトル を編集します < ページ 1 タイトルはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 20
1 ページ 1 タイトル 部分を選択します 2 [BackSpace] キーを押し ページ 1 タイトル を消します 前後のタグを消さないように注意すること 3 <h1> と </h1> の間にサイト名を入力します 4 保存ボタンをクリックします 5 Google Chrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して 21
< 編集後 > このようにページ 1 タイトルが編集されていれば OK です 22
15 次にページ 1 の文章を編集します < 文章はここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 23
1 文章 (600 文字以上 ) 部分を選択します 2 [BackSpace] キーを押し 文章 (600 文字以上 ) を消します 24
3 <!-- 説明文 Start--> と <!-- 説明文 End--> の間に 文章を入力します 25
4 保存ボタンをクリックします 5 Google Chrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して 6 一度 サイトを確認してみましょう 確認してみると 改行が反映されていませんね HTML で改行するためには 改行を表す記号が必要なんですね 改行の記号を付けることではじめて改行されます 26
その改行記号が <br> です 改行したいところに <br> を付けることで改行されます < と > の入力方法 半角入力で < は [Shift]+[ ね ] > は [Shift]+[ る ] で入力することができます 27
7 それでは 文章に <br> を付けて改行させましょう 0001.html に戻り 説明文の文末に <br> を付けます ちなみに 以下のようなサイトを使うと一括で <br> タグを付けてくれます HTML や Wiki の改行タグ自動挿入機 http://www.cost-simulator.com/eco/etc/enter.html 28
8 保存ボタンをクリックします 9 Google Chrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して 29
< 編集後 > このように説明文に改行が追加されていれば OK です これで 001.html は完成です 16 同様の手順で 002.html ~ 005.html も編集しましょう 30
トップページを編集する 次に トップページを編集します 17 index.html を TeraPad で開きます 1 index.html を左クリックします 2 左クリックしたまま TeraPad の上まで移動させます 3 左クリックを離します 2 1 3 31
18 index.html を TeraPad で開くと このような画面が表示されます ~ の部分を編集することで子ページが完成します 32
19 index.html を編集する前に現在どのように表示されるのか 確認してみましょう index.html を GoogleChrome で開きます 1 index.html を左クリックします 2 左クリックしたまま GoogleChrome の上まで移動させます 3 左クリックを離します 3 2 1 20 すると このようなページが表示されます 33
それでは実際に index.html を編集していきます 21 まずは サイトタイトル 部分を編集します < サイトタイトルはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 34
1 サイトタイトル 部分を選択します 2 [BackSpace] キーを押し サイトタイトル を消します 前後のタグを消さないように注意すること 3 <title> と </title> の間にサイト名を入力します 4 保存ボタンをクリックします 5 GoogleChrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して 35
< 編集後 > このようにサイトタイトルが編集されていれば OK です 36
22 あと 2 箇所 サイトタイトル を編集します < ここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 37
1 サイトタイトル 部分を選択します 2 [BackSpace] キーを押し サイトタイトル を消します 前後のタグを消さないように注意すること 3 <h1> と </h1> の間にサイト名を入力します 4 保存ボタンをクリックします 5 GoogleChrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して < 編集後 > このようにサイトタイトルが編集されていれば OK です 38
23 もう一箇所 サイトタイトル 部分がありますので そちらを編集します < サイトタイトルはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 39
1 サイトタイトル 部分を選択します 2 [BackSpace] キーを押し サイトタイトル を消します 前後のタグを消さないように注意すること 3 2016 と All の間にサイト名を入力します 4 保存ボタンをクリックします 5 GoogleChrome に戻りブラウザのボタンまたは [F5] キーを押して 更新してください < 編集後 > このようにサイトタイトルが編集されていれば OK です 40
24 次に ページ 1 へのテキストリンクを編集します < 子ページへのテキストリンクはここに表示されるものです > < 編集箇所 > < 編集箇所 : 拡大 > 41
1 ページ 1 タイトル 部分を選択します 2 [BackSpace] キーを押し ページ 1 タイトル を消します 前後のタグを消さないように注意すること 3 _blank"> と </a> の間に ページ 1 のタイトル を入力します 4 保存ボタンをクリックします 5 GoogleChrome に戻りブラウザの 更新してください ボタンまたは [F5] キーを押して < 編集後 > このようにページ 1 のタイトルが編集されていれば OK です 42
25 ページ 2 ~ ページ 5 へのテキストリンクも編集します < 編集後 > このようにページ 2~ ページ 5 へのテキストリンクが 編集されていれば OK です これで日記サイトの完成です サーバーにアップロードしましょう 43
サーバーにアップロードする 日記サイトができましたら サーバーにアップロードしましょう 1 デスクトップにある FileZilla のアイコンをダブルクリックして FileZilla を起動させましょう 2 左上にある ボタンをクリックします 44
3 サイトマネージャー が表示されましたら サーバーを選択し 接続 (C) をクリックします 4 すると レンタルサーバーに接続が開始されます 枠部に ディレクトリ一覧の表示成功 と表示されれば OK です 45
それでは日記サイトをアップロードしてみましょう 5 独自ドメインで設定したフォルダをダブルクリックして開きます 6 独自ドメインのフォルダを開くとこのように表示されます 46
7 次に FileZilla と日記サイトフォルダの 両方が見えるように配置します 47
8 img フォルダ index.html 001.html ~ 005.html style.css を選択状態にします 1 日記サイトフォルダ内のどこでもいいので右クリックする 2 キーボードの [CTRL]+[ A] を押す 48
9 1 選択状態の img フォルダ index.html 001.html ~ 005.html style.css を左クリックします 2 左クリックしたまま FileZilla の右下枠の中まで移動させます 3 左クリックしている人差し指を離します 3 2 1 これでアップロードが完了しましたので 日記サイトをインターネット上で見ることができます 49
日記サイトを確認する アップロードできましたので 正常にアップロードできているか確認しましょう 26 1 まず index.html の上で右クリックします 2 次に URL をクリップボードにコピー (O) を左クリックします 1 2 これで index.html の URL をコピーすることができました 50
27 次に 直接 GoogleChrome の検索窓に貼り付けします まだここでは ENTER キーは押さないでくださいね 28 次に 先頭からドメイン名の前の / までの部分を削除します 29 下のような状態になりましたらキーボードの ENTER を押して下さい 51
30 正常に URL が入力できましたら 下記のようなページが表示されます 日記サイトがしっかりと表示されていれば OK です 52
日記サイトの URL をメモしておこう 日記サイトの URL は ASP に登録するときに必要になってきます ですので ここで日記サイトの URL を メモしておくととても便利です 10 まず 日記サイトのURLをコピーします 1 URLを選択します 2 選択したURLの上で右クリックします 3 コピー(C) を左クリックします 1 2 3 これで日記サイトの URL をコピーすることができました 53
11 TeraPad を起動します 12 さきほど コピーした URL を貼り付けます 13 名前を付けて保存します 1 ファイル(F) をクリックします 2 名前を付けて保存(A) をクリックします 1 2 54
14 デスクトップに保存します 1 デスクトップ をクリックします 2 フィル名(N) に 日記サイトのURL と入力します 3 保存(S) ボタンをクリックします 1 2 3 55
15 これで デスクトップに保存されました あとは以下のマニュアルを参考に 各 ASP に登録しましょう K1-016:AffiliateB の登録方法.pdf K1-017:A8.net の登録方法.pdf K1-018:ValueCommerce の登録方法.pdf K1-019:Link-A の登録方法.pdf K1-020: レントラックスの登録方法.pdf 56