アメブロで無料レポートを配布するブログパーツの作り方

(1)

【あいあいスクール】

アメブロで無料レポートを配布する

ブログパーツの作り方

(2)

【著作権について】このレポートは著作権法で保護されている著作物です。このレポートの著作権は、「あいあいスクール」に属します。著作権者の許可なく、このレポートの全部又は一部をいかなる手段においても複製、転載、流用、転売等することを禁じます。このレポートに書かれた情報は、作成時点での著者の見解等です。著者は事前許可を得ずに誤りの訂正、情報の最新化、見解の変更等を行う権利を有します。【その他】このレポートの作成には万全を期しておりますが、万一誤り、不正確な情報等がありましても、著者・パートナー等の業務提携者は、一切の責任を負わないことをご了承願います。このレポートを利用することにより生じたいかなる結果につきましても、著者・パートナー等の業務提携者は、一切の責任を負わないことをご了承願います。【推奨環境】このレポートに記載されている URL はクリックできます。できない場合は最新の AdobeReader を下記のページよりダウンロードしてください。（無料） http://www.adobe.co.jp/products/acrobat/readstep2.html

(3)

もくじはじめに ... 5 第１章：無料の文字編集ソフトを使う ... 6 （１）TeraPad のダウンロード ... 7 （２）TeraPad の設定... 8 第２章：ブログパーツの作成 ... 9 （１）レポート名をクリックした際にジャンプする先を指定する ... 9 （２）ボタンをクリックした際にジャンプする先を指定する ... 10 （３）説明先を指定する ... 11 （４）アフィリエイトリンクを変更する ... 12 （５）カラーを変更する ... 13 （６）変更内容を保存する... 13 第３章：アメブロへのブログパーツ設置 ... 14 （１）プラグインの追加 ... 14 （２）フリープラグインの配置 ... 16 参考：サンプルのソースコード ... 17 （１）test.html ... 17 おわりに ... 18

(4)

はじめまして。あいあいスクール代表/畠茂雄（はたけしげお）と申します。 1962 年生まれ。石川県金沢市出身。 2011 年 1 月現在、大阪市のコンピュータ専門学校の講師をしています。授業では、主にシステム開発系やネットワーク系の科目を担当し、「ＸＭＬ」や、「サーバサイドＪａｖａ」などを教えていますが、その専門知識を活かして、おもしろくて役に立つ無料ツールを提供していきたいと思っています。個人的には、ＩＴ業界のでんじろう先生を目指しています（笑）ツールを利用してあなたのファンを増やしてもらうのは、もちろんですが、さらに、一人でも多くの方が、このツールの作成を通じて、夢のある IT 業界で、仕事をしてみようという思いを持ってくれることを期待しています。プロフィール詳細は、こちら ⇒ http://www.iischool.net/2/

(5)

はじめに

あなたの紹介で、商品やサービスを買ってもらうには、魅力的なプレゼントが欠かせません。特に、アフィリエイトする商品やサービスは、あなたからでなく、他の人からでも全く同じものが手に入ります。他のアフィリエイターと差別化するために、ちょっとしたおまけとして、レポートやツール、個人的なサポートなどのプレゼントが、よく行われています。あなたもすでに、何らかのプレゼントを付けているかもしれません。本レポートでは、アメブロで無料レポートを配布するためのブログパーツの作り方を教えます！プログラマーでもあるまいし、自分にそんなツール作れるの？・・・と思ったあなた。心配いりません！「メモ帳」で、文字編集ができる程度のスキルがあれば、誰でも簡単にオリジナルなブログパーツを作って設置できます。

(6)

第１章：無料の文字編集ソフトを使う

今回作成するツールを作るために、文字編集ソフトが必要になります。（あっ、もちろんパソコンも必要で、インターネットができる環境も欲しいです。・・・） Windows パソコンにおまけで付いている「メモ帳」でも、できないことはないのですが、下図のように、文字に自動的に色がついて、スペルミスが見つけやすいので、今回は、TeraPadという無料の文字編集ソフトをおすすめしておきます。＜TeraPad の起動画面＞

(7)

（１）TeraPad のダウンロード

TeraPad のダウンロードは、こちらから http://www.vector.co.jp/soft/win95/writing/se104390.html ※なお、このレポートでは、プログラムのダウンロードの仕方や圧縮ファイルの解凍方法といった基本的なところは説明しません。その点、どうぞご了承ください。ダウンロードしたファイルを解凍して作成されたフォルダ内の「TeraPad.exe」をダブルクリックすることで、起動することができます。

(8)

（２）TeraPad の設定

TeraPad 起動後、「表示」メニューにて、［編集モード］や［行の折り返し桁］、［フォント］などの設定ができます。［編集モード］は、今回、『ＨＴＭＬ』とします。 ※ファイル名によって自動選択されますので、確認のみでＯＫです。［フォント］のサイズなどは、自分の使いやすい設定にしておきましょう。

(9)

第２章：ブログパーツの作成

●ブログパーツのサンプル（test.html）こちらからダウンロードできます。（解凍してお使い下さい） ⇒ http://www.iischool.net/download/testhtml.zip 「test.html」をブラウザで開いて、どのように表示されるか確認できます。編集には、「test.html」を Terapad やメモ帳などの文字編集ソフトで開きます。

（１）レポート名をクリックした際にジャンプする先を指定する

「test.html」ソース内の以下の箇所を変更します。サンプルでは、レポート名称が、「１記事で５度おいしい極楽ブログ記事作成法」となっていますので、この部分の文字を、自分の配布したいレポート名称に書き換えます。 http://www.iischool.net/pdf/kiji5do.pdf の部分には、レポート名をクリックした際にジャンプする先を指定します。（新しいウィンドウが開きます）メールアドレスを取得するためのフォームにリンクしたり、レポートをダウンロードできる配置先（直リンク）などを指定して下さい。 ※ジャンプ先は、ご自分でご用意願います。

１記事で５度おいしい極楽ブログ記事作成法</a>

(10)

（２）ボタンをクリックした際にジャンプする先を指定する

「test.html」ソース内の以下の箇所を変更します。サンプルでは、［無料ダウンロード］ボタンとなっています。このボタンに表示される文字を変えることができます。もちろんこのままでもかまいません。 http://www.iischool.net/pdf/kiji5do.pdf の部分には、ボタンをクリックした際にジャンプする先を指定します。（同じウィンドウに表示されます）メールアドレスを取得するためのフォームにリンクしたり、レポートをダウンロードできる配置先（直リンク）などを指定して下さい。 <form name="gsform"  action="http://www.iischool.net/pdf/kiji5do.pdf" method="POST" style="margin:8px 0 0;">

このボタンに表示される文字を変えたい場合には、上の無料ダウンロードの部分を書

(11)

（３）説明先を指定する

「test.html」ソース内の以下の箇所を変更します。サンプルでは、>> 本パーツ設置方法となっています。説明先や参照先を変えることができます。もちろんこのままでもかまいません。 http://www.iischool.net/pdf/ameparts.pdfの部分には、クリックした際にジャンプする先を指定します。（新しいウィンドウが開きます）

<a href="http://www.iischool.net/pdf/ameparts.pdf" target="_blank" style="color:#000;">本パーツ設置方法 </a>

参照先サイトや説明資料などの配置先を指定して下さい。

(12)

（４）アフィリエイトリンクを変更する

「test.html」ソース内の以下の箇所を変更します。サンプルでは、 powered by 極サポとなっており、「極サポ」部分をクリックすると、商品の販売ページが表示されます。この部分は、自分のアフィリエイトリンクに変えるかまたは、全く別のリンクに変更して下さい。もちろんこのままでもかまいませんが・・・ http://www.haatdesign.com/の部分には、自分のアフィリエイトリンクや、全く別のリンク先を指定して下さい。（新しいウィンドウが開きます）

(13)

（５）カラーを変更する

サンプルは、「グレー」で作成してありますが、他の６色に変更することも可能です。グレー

_gl_

（サンプルの色です）ブルー

_b_

オレンジ

_o_

レッド

_r_

グリーン

_g_

パープル

_p_

ホワイト

_w_

色を変えたい場合には、「test.html」ソース内の以下の６箇所全部を上記の色名略称に変更します。例えば、グレーからブルーに変更したい場合には、

_gl_

の部分を

_b_

とします。

url(http://www.haatdesign.com/images/small_gl_left_top.gif)

url(http://www.haatdesign.com/images/small_gl_right_top.gif)

url(http://www.haatdesign.com/images/small_gl_tit.gif)

url(http://www.haatdesign.com/images/small_gl_bg.gif)

url(http://www.haatdesign.com/images/small_gl_left_bot.gif)

url(http://www.haatdesign.com/images/small_gl_right_bot.gif)

（６）変更内容を保存する

変更が終了したら、「test.html」を Terapad やメモ帳などの文字編集ソフトで、「上書き保管」しておきます。「test.html」をブラウザで開いて、正しく表示できるか確認して下さい。

(14)

第３章：アメブロへのブログパーツ設置

アメブロにブログパーツを設置する際に、あらかじめ、第２章で作成が完了した「test.html」を Terapad やメモ帳などの文字編集ソフトで開いておきます。

（１）プラグインの追加

アメブロの「マイページ」にログインし、「ブログを書く」⇒「サイドバーの設定」⇒「サイドバーの基本設定」を選びます。 >>プラグインの追加はこちらをクリックします。

(15)

あらかじめ、Terapad やメモ帳などの文字編集ソフトで開いておいた

「test.html」内の全ソースをコピーして「フリープラグイン」欄に貼り付けます。［保存］ボタンをクリックして、ソースを保存します。

(16)

（２）フリープラグインの配置

「ブログを書く」⇒「サイドバーの設定」⇒「サイドバーの配置」を選びます。

左側の「使用しない機能」欄の［フリープラグイン］をマウスでドラッグし、右側の「使用する機能」欄の設置したい位置へ置きます。

(17)

参考：サンプルのソースコード

もしなんらかの理由で、サンプルのダウンロードができない場合には、こちらの方法で、本無料レポートから作成することができます。

（１）test.html

Adobe Reader の「ツール」→「選択とズーム」→「選択ツール」で、以下のソースコードを選択・コピーし、test.html という名前のファイル名で保管して下さい。 <div style="width:150px;">

<div style="height:13px;background:url(http://www.haatdesign.com/images/small_gl_left_top.gif) no-repeat left top;"> <div style="height:13px;background:url(http://www.haatdesign.com/images/small_gl_right_top.gif) no-repeat right top;"> <div style="margin:0 5px;padding-left:8px; height:13px; color:#fff; background:#919191

url(http://www.haatdesign.com/images/small_gl_tit.gif) no-repeat left top; font-size:10px;">無料レポートプレゼント！</div> </div>

</div>

<a href="http://www.iischool.net/pdf/kiji5do.pdf" target="_blank" style="color:#000; font-weight:bold;"> １記事で５度おいしい極楽ブログ記事作成法</a>

<form name="gsform" action="http://www.iischool.net/pdf/kiji5do.pdf" method="POST" style="margin:8px 0 0;"> <input type="submit" value="無料ダウンロード" title="無料ダウンロード" />

</form>

<div style="margin:0 7px; padding:6px 0 2px; height:13px; position:relative; text-align:left;">>>  <a href="http://www.iischool.net/pdf/ameparts.pdf" target="_blank" style="color:#000;">本パーツ設置方法</a> </div>

<div style="margin:5px 7px 0; display:block; color:#8b8b8b; font-size:10px; text-align:right;">powered by

</div>

</div> </div>

(18)

おわりに

最後までお読みいただきありがとうございました。このレポートを活用して、ぜひ多くの人の役に立つレポート等を提供して下さいね。＜あいあいスクールメルマガ読者限定プレゼントコーナー＞下記のメールマガジンに登録いただいた方には、プレゼント(無料)を用意しています。メルマガ内でプレゼントサイトをご案内しています。 ■■ ＜＜あいあいスクールで学び、未経験のＩＴ業界に就職する＞＞ ■■ http://www.iischool.net/ IT 業界への就職・転職は、インターネットビジネスで稼ぐスキルがあれば、未経験でも思いのままです。コンピュータ専門学校の現役講師が、アフィリエイトで上位５％に入るノウハウや様々なツールの作り方を無料で教えます。メールマガジンのバックナンバー・購読・配信停止はこちら（インフォマグ） http://www.infomag.jp/Site_3406.html （まぐまぐ） http://www.mag2.com/m/0001008842.html 本レポートに対する、ご意見・ご感想・ご質問等の連絡先はこちら ⇒ [email protected]