A8.net(エーハチネット)のはりっぱくんで0円ネットショップをつくってみよう
はりっぱくんとは、ページに合った広告を自動で表示してくれる広告ツールです。
一度、広告タグを貼ったら、リンク切れがおきる事なく、はりっぱなしにしておけるから「はりっぱくん」です。
はりっぱくんを使えば、ネットショップのような商品一覧ページを10秒で作る事ができます。
今日は新しい事をやりたい気分だったので、
はりっぱくんを活用して、0円ネットショップを作る事にしました。
何のお店にするか決めよう
「アフィリエイトはテーマ決めが大事ッッ!!!」と耳にタコができる位いわれているので、
何のお店にしようか、ある程度ジャンルを絞っておきます。
私はキャラクター専門店にする事にしました。できるだけマニアックなキャラクターを取り扱った変なサイトにしようと思います。
レンタルHPスペースを借りよう
無料のレンタルHPスペースを借ります。
私はFC2ホームページで無料HPをレンタルする事にしました。
テンプレートをHPにアップ
無料テンプレート探し
サイトのテーマに合ったテンプレートを選びます。
最近はスマホでネットを見る人が多いので、
レスポンシブデザインのテンプレートがおすすめですよ〜。
私はテンプレートパーティー様から
「tp_simple7」という名前のテンプレをお借りする事にしましたよ。
ダウンロードしたファイルはZipファイルになっているので、ダブルクリックして解凍します。
レンタルHPにテンプレをアップロード
テンプレートのフォルダの中身全部をFC2ホームページにアップします。
FC2ホームページにログインして、ファイルマネージャーをクリック。
アイコンをクリックして、フォルダの中身を全部アップします。
imagesとかcssなどのフォルダ(ディレクトリ)はアップできないので、
右クリック⇒ディレクトリで「images」「js」「css」「base」ディレクトリを作成後、
ディレクトリをダブルクリックして、該当するファイルをアップロードしていきます。
テンプレートのファイルを全部アップしたらこんな感じになります。
ページの作成&設定
about.htmlの上で右クリック⇒このディレクトリに複製をクリック。
about_copy_1.htmlというファイルが作られるので、Enterキーを押して、任意の名前に編集します。
私は001.htmlにしました。
とりあえず、001.htmlを商品ページ第一号とします。
001.htmlを選択した状態でをクリックして、エディタ編集ページへGO。
設定1:みたまま編集できるようにする
アイコンをクリックすると、HTMLの編集画面がでてくるので、
<link rel="stylesheet" href="css/style.css">
の所を
<link rel="stylesheet" href="http://●●●.web.fc2.com/css/style.css">
に編集します。(●●●はあなたのFC2HPのIDを入力)
編集部分がわからない場合は、Ctrl + Fでページ内検索をしてください。
編集終了後、OKボタンをクリックします。
すると、エディタの編集画面にCSSが適用されて、サイトを見たまま編集できるようになります。
設定2:SEOタイトルなどの編集
アイコンをクリックすると、HTMLの編集画面を表示させて以下の部分を編集。
- <title>〜</title> タグにページのタイトルを入力
- <meta name="description" content="〜"> タグにページの説明文を入力
- <meta name="keywords" content="〜"> タグにキーワードを設定(不要な場合は消してもOK)
編集できたらOKボタンをクリックします。
設定3:メインコンテンツ・サイドバーの設定
- 右上の小さいテキスト(h1タグ)にページのタイトルを入力
- メインコンテンツの1番上の見出し(h2タグ)にページのタイトルを入力
- 不要なコンテンツを消して(選択 ⇒ deleteキーで消えます)、広告を掲載したい部分に「★」を入力しておく
- サイドバーのメニューを編集
はりっぱくんのタグを貼り付け
はりっぱくんで広告タグを発行
A8.netにログインをして、
「ツール」メニュー内の「はりっぱくん」をクリックして、ページ最下部の「広告リンクを発行」から広告タグ発行ページへ行きます。
キーワードの所にアニメのタイトルを入力。
「可変タイプで選択」にチェックを入れて、以下のように設定。
- 1件あたりのサイズ:可変タイプ(300×160)
- 縦表示件数:15件
- 横表示件数:2件
- 繰り返し:縦並び
「この条件で広告リンク作成」ボタンをクリックして、下に出てきたタグをコピーします。
HPに広告タグを貼り付け
HPのファイルマネージャーに戻って、をクリックしてHTML編集を表示させます。
はりっぱくんの掲載位置(★の部分)にコピーしておいたタグを貼り付けます。
タグを貼り付ける場所がわからない時は、Ctrl + F で「★」を検索しましょう!
はりっぱくんで商品ページ完成!
ページを保存して、商品一覧ページが完成しました!
その後、TOP画像を貼り替えたり、細々とした作業をした後、
完成した0円ネットショップはこんな感じです\(^o^)/
http://manichara.web.fc2.com/
ちなみにTOPのイラストはジュエルセイバーFREE(無料素材)からダウンロードしたものです。
このサイトが1円でも儲かったら報告しますね〜!
HPづくりの練習にもなるし、
はりっぱくんを暇な時は是非活用しましょう(*´∀`*)♪"
ディスカッション
コメント一覧
まだ、コメントがありません