第４回楽天広場でホームページ作成
どきどき初心者のための
アフィリエイトの仕組と導入方法
～第４回：楽天広場でホームページ作成～
アフィリエイト 初心者限定
のアフィリエイトの仕組と導入方法の解説です。
皆さんも、どきどきアフィリエイト体験をして、楽しみながらお小遣い稼ぎをして見てください。
皆さんも、どきどきアフィリエイト体験をして、楽しみながらお小遣い稼ぎをして見てください。
第４回は、「楽天広場でホームページ作成！」です。
【HTML（エイチティーエムエル）】
楽天広場でのホームページ作成では、普通に文章を書き込めば作成できます。
でも、それだと見栄えが悪いので、ちょっとしたホームページの作成の方法について解説します。
そこで、どうしてもHTMLについての解説をしなければなりません。うーん。
作成の段階では、ホームページビルダーを使おうと思っていますが、楽天広場の管理画面では、HTMLがそのまま表示されますので、ちょっとした基本は知っておいた方が便利に使えます。
【ホームページの仕組】
ホームページは、全てこのHTMLという 言語 で書かれています。
HTMLは、簡単な言語で基本は<xx> </xx>という集まりです。
このｘｘの事をタグと言います。
このタグの集まりを、インターネットエクスプローラなどのブラウザが解釈して、画面になっています。
例えば、 このページを開いてください。 ←ここをクリックして下さい。
インターネットエクスプローラが開いて、私のホームページというのが表示されましたね。
そのウインドウの表示メニューをクリックして、「ソース」をクリックして下さい。
すると、めも帳が開いて、中に以下のような文字列が現れたと思います。
これがHTMLです。例えば、<HTML>はHTMLの始まりを、</HTML>はHTMLの終わりを示します。
殆どのタグは、<XX>で始まり</XX>で終わりを示しています。
下に、ここに出てくるタグの解説をします。
例えば、１～５までの数字を１行に並べようとすると、以下のようになります。
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD>
</TR>
これが、下の様に表示されます。
簡単でしょう？
このタグ達は、決して重なる事はありません。例えば、<TR><TD></TR></TD>の様にはなりません。
括弧と同じです。違う種類の括弧を使うときに、＜≪＞≫とはなりませんよね。括弧閉じは終になって＜≪≫＞こうなりますよね？それと同じ事です。
タグ開始とタグ終了の間にある文字は、ブラウザに表示されます。
ここまでは、判っていただけたでしょうか？判らない方は、掲示板かメールでお知らせください。
＝＝＝今日はここまでかな＝＝＝04/07/14
【ホームページで絵を表示する仕組】
ホームページには、色々な絵が表示されますよね？
あの絵の表示の仕組について、解説します。
ホームページを見ると、１つのページに文字があり、絵が配置されています。
これは、一つのファイル（パソコン上でのアイコン一つの単位の書類の事）に見えますが、文字はHTMLファイルにあり、絵は絵のファイルにあります。
ここのホームページを見てください。 ←ここをクリックして下さい。
「ホームページに絵を貼り付ける」というページが開いたはずです。
このページには、タイトルと鉛筆の絵が表示されていますよね。
ソースを表示してみる（表示メニューのソースを選択）と、以下のようになっていますね。
ここで、新しく出てきたタグは、<IMG SRC="image/pic.gif">というタグです。
このタグは、これまでのタグの様に、終了のタグがないタイプのタグです。（</IMG>がない。）
この場所に、image/pic.gifという絵を表示する事を表しています。
その絵の本体は、 ここにあります。
このページは、トップフォルダとimageフォルダの構成になっています。
ここのページは、以下の様な構成になっています。
トップフォルダ
pic.htm
imageフォルダ
pic.gif
この意味は、トップフォルダには、pic.htmとimageフォルダがあり、imageフォルダの中には、pic.gifファイルがあるという事です。
.htmとか.gifは拡張子（サフィックス）と言われており、ファイルの種類を表しています。ソースのimage/pic.gifというのはimageフォルダの中のpic.gifファイルを示しています。。
という事で、このページは、文字情報がpic.htmファイルに記述され、その中でimageフォルダの中のpic.gifを表示しなさいという記述がされているので、ブラウザで表示した時には、鉛筆の絵が表示されるのです。
SRC=に続く部分の記述には、いろいろな方法があり、上記の例のように、トップから見た場所もしていできますし、インターネット上のURLでの指定もできます。
例えば、下の２つの鉛筆の左側の絵は、
<IMG SRC="http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif">
というタグで表示されています。
これは、 http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif ここの絵を貼り付けています。
=======今日はここまでかな7/15======
【楽天広場のトップページを作る方法】
絵を貼り付ける仕組がわかった所で、次は、楽天広場の自分のホームページのトップページを作る方法です。今回は、実際に試してみて頂きます。
今回からは、ホームページビルダーを使った方法で解説します。
【ホームページビルダーのインストール】
ホームページビルダーを持ってない方は、ホームページビルダーの体験版（無料）をインストールします。したのリンクをクリックして下さい。
http://www-6.ibm.com/jp/software/internet/hpb/download.html
ホームページビルダー体験版のページが開きましたよね。
表になっている部分の一括の部分の 「hpb8tp.exe (76,520,275 バイト) 」という部分をクリックします。
すると、名前をつけて保存というウインドウ（ダイアログ）が現れたと思います。
この状態で、保存ボタンをクリックします。
大きさが76MByte(メガバイト）あるので、ブロードバンドでない方はかなり時間がかかると思いますので、辛抱してください。Bフレッツや有線ブロードバンドの方は、１分程度で終了すると思います。
ダウンロードの完了ウインドウが開きますので、「開く」ボタンをクリックして下さい。
すると、インストールが始まりますので、指示に従ってインストールしてください。
【ホームページを作る】
ホームページビルダーを起動（スタートメニューのプログラムのホームページビルダー体験版をクリック）すると、「ホームページビルダーへようこそ」という画面が現れます。
「スタンダード」ボタンをおして、OKボタンを押してください。
すると、ホームページビルダーの画面になります。
「ファイル」メニューの「標準モードで新規作成」を選びます。
すると、ホームページビルダーの真ん中の領域がグレーから白になりました。
この白い部分にホームページを作ってゆきます。
今回は、絵と文字を入れた簡単なページを作ってみます。
まず、画面左に、緑の中に蝶が飛ぶ絵（下に0001.gif）変えてある絵があると思います。
（ない場合には、素材のタブをクリックして画面の中の「画像」を選びアニメーションをクリックして下さい）
そして、蝶の絵をマウスの左ボタンでドラッグ（押しっぱなしでマウスを移動）して、真ん中のホームページの領域にドロップ（マウスの左ボタンを離す）してください。
すると、ホームページの領域に絵が張り付きましたね。
そして、絵の少し右の白い部分をクリックすると、絵と絵の右の白い部分がピンクの四角い領域で囲まれたと思います。その状態で、右側の「段落」の中の「見出し１」という部分をクリックします。
これは、文字の書体を「見出し１」（大きな文字）にした事を表します。
そして、文字を入力します。ここでは、「どきどきわくわく始めてのホームページ」と入力します。
この状態でハードディスクに保存しましょう。
保存の方法は、「ファイル」メニューの「上書き保存」をクリックします。
すると、名前をつけて保存というウインドウが現れます。
上の部分の「保存する場所」の右側の四角い領域の右の逆三角をクリックします。
すると、場所のリストが出てきますので、マイドキュメントを選んでください。
ここに新しいフォルダを作り、その中にホームページを保存します。
新しいフォルダを作る方法は、保存する場所の右の四角い領域（今はマイドキュメントが選ばれている）の右３つ目の「フォルダのマークの右上角が光っている」アイコンをクリックします。
すると新しいフォルダが作られます。
この「新しいフォルダ」の名前を「myhp」と入力します。
ホームページのURLには、日本語は使えませんので、 半角英文字 で入力します。
そして、そのmyhpフォルダのアイコンをダブルクリック（２回クリック）します。
保存する場所の右側が「myhp」に変わりましたね。
そこで保存ボタンをクリックして下さい。
ファイルの名前は、newpage1.htmになったと思います。
素材ファイルをコピーして保存画面がでたと思いますが、そのまま「保存」ボタンを押してください。
フォルダの中身を確認してみます。
テスクトップ（ウインドウが何もない部分）のマイドキュメントをダブルクリックします。
すると、「マイドキュメント」のウインドウが現れます。
そのウインドウの中から「myhp」フォルダを見つけ出し、ダブルクリックします。
すると、myhpフォルダの中身が現れたはずです。
その中には、
0001.gif
newpage1.html
という２つのファイルがあるはずです。.htmlファイルは、.htmファイルと同じ扱いです。
出来たページは、こうなります。 ←ここをクリックしてください。
========今日はここまでかな。7/16=======
【いよいよ楽天広場のホームページにして見る】
昨日、作ったnewpage1.htmというホームページを楽天のホームページとして、表示する手順を説明します。
まず、ホームページビルダー８体験版を起動します。（スタートメニューのプログラムのホームページビルダーV8体験版のホームページ・ビルダーをクリックします）
すると、「ホームページビルダー８へようこそ」というウインドウ（ダイアログ）が現れます。
ここでは、キャンセルボタンを押してください。
すると、ホームページビルダーの画面になりましたよね。
ホームページビルダーのファイルメニューをクリックし、開くをクリックして下さい。
そして、newpage.htmlをクリックして、開くボタンをクリックします。
これで、昨日のページば現れたはずです。
（newpage.htmlが見つからない人は、昨日の手順で「マイドキュメント」→「myhp」を選んでください）
この状態で、中央の白いホームページのある領域の直ぐ上の「HTMLソース」とうタブを押します。
「ページ編集」「HTMLソース」「ページ/ソース」「プレビュー」のタブがあるはずです。
「HTMLソース」タブがない人は、簡単編集モードになっていますので、以下の手順で切替えます。
編集モードの切り替え
・「表示」メニューの「編集スタイルの切り替え」をクリックします
・ホームページビルダーへようこそ画面がでますので、スタンダードをクリックしOKを押します。
・これで、タブが増えたはずです。
「HTMLソース」タブをクリックすると、HTMLの中身が見えます。
楽天のホームページでは、既にホームページの枠組みは出来ていて、その中に自分のホームページを書き込む方式ですので、
このHTMLの一部だけを使います。
具体的には、 <BODY>の直後から</BODY>の直前 までです。
上のソースでは、赤くしてある部分です。
ホームページビルダーで、上の２行（ホームページビルダーでは１行で表示されているはず）を選択します。
選択の方法は、一番左の<H1>の<の左でマウスのボタンを押し、押しながら１行分だけ下にずらします。（マウスボタンを押しながらマウスを動かす事をドラッグするといいます。）
すると、１行だけが黒く選択されます（文字は白抜きになります。）
その状態で、マウスボタンを離すと黒く選択されたままの画面になります。
この一行分を パソコンに記憶（コピー） します。コピーする方法は以下の通りです。
コピーする方法（３通りの方法があります<もっとある？>）
方法１：黒く選択されている部分で、マウスの右ボタンをクリックし、コピーを選択
方法２：「編集」メニューの「コピー」をクリック
方法３：キーボードの左下「Ctrl（コントロール)」を押しながら「C」を押して放す
最初は、方法１または方法２が判りやすいと思いますが、慣れると方法３が便利です。
ここでコピーしたものは、後ほど楽天のホームページの書込みに使いますので、覚えて置いてください。
【 楽天広場のホームページに書き込む】
楽天広場にログインしてください。これはもう出来ますよね？
インターネット画面を開いて、お気に入りから自分のページを選び表示します。
その後、右上にあるログインをクリックすると、自分の管理画面が表示されます。
そして、左側の操作メニューのホームページ作成の所にある、 「トップページの編集」 をクリックします。
すると、「トップページに好きな文章を掲載できます」という画面になります。
そして、本文とあり、その下に書込みができる四角いフィールドがあります。
その本文の四角いフィールドをクリックすると、四角内の左上に縦の5mmほどの棒が現れます。ここに入力してねというサインです。
この状態で、先ほどコピーした１行を貼り付けます。貼り付ける方法は以下の３通りあります。
貼り付ける方法（３通りの方法があります）
方法１：貼り付けたい場所で、マウスの右ボタンをクリックし、「貼り付け」を選択
方法２：「編集」メニューの「貼り付け」をクリック
方法３：キーボードの左下「Ctrl（コントロール)」を押しながら「V」を押して放す
先ほどの１行が、貼り付けられて表示されたと思います。
この状態で、「＠このHTMLを登録」ボタンを押してください。
と出ましたね。
そして、本文を書込むフィールドの下に
HTMLタグの記述に誤りがあります
1行目： src 属性の内容が不正です
と書いてあると思います。
その下の[HTMLエラー詳細情報を表示]をクリックして下さい。
ウインドウが開いて、エラーの状況が表示されます。
src属性の内容が不正ですの意味は、先ほどの１行のsrc=XXの部分に誤りがあるという事です。
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
この行ですね。
これは、ホームページビルダーでは、問題なかったのに楽天広場では何故エラーするのでしょうか？
それは、ホームページの構成にあります。
前回、「myhp」フォルダの中に、newpage1.htmlと0001.gifがあると解説しました。
でも、楽天広場のファイルの扱い方は、普通のホームページと違います。
このため、このエラーがでます。
どうすれば良いのでしょうか？
楽天では、画像は、HTMLファイルとは別に登録する必要があるのです。
画像の登録
まず、先ほどのエラー詳細情報のウインドウを「閉じる」ボタンを押して閉じます。
そして、楽天広場の自分の管理画面の左側のホームページ作成の３つ下の「画像の倉庫」をクリックします。
そして、 「登録する画像を選択」 の入力フィールドの右の「参照」ボタンを押します。
ファイルの選択画面が現れますので、ファイルの場所からマイドキュメントを選び、「myhp」フォルダを探してダブルクリックし、0001.gifを選択します。
開くボタンを押すと、 「登録する画像を選択」 の入力フィールドに以下の文字が入ったと思います。
[C:\Documents and Settings\yasuda\My Documents\myhp\0001.gif]
「C:」は、パソコンにより、Dとか他のアルファベットになります。
そして、 写真のタイトル にこの絵につける名前を入力します。
この写真のタイトルは、この絵を判別するために付ける名前で、楽天広場内でのみ有効です。例えば、「蝶の絵」にしましょう。
そして、「＠選択された画像を登録」ボタンを押します。
登録完了の画面が現れます。
これで、楽天広場にこの絵（画像）が登録されました。
確認してみます。
もう一度、管理画面の左側のホームページ作成の３つ下の「画像の倉庫」をクリックします。
すると、先ほど登録した絵が出ていますよね。ここで絵が出てこない場合には、登録されていませんので、再度挑戦してください。
その絵をクリックします。
すると、絵の下に、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" alt="蝶の絵">
の表示があります。
この絵のSRC="に続く部分が、登録した画像の場所になります。
ですから、下の0001.gifの部分をhttp://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif
にする必要があるのです。
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
したがって、下の様にすると表示できるようになります。（青い部分を変更）
<H1><IMG src=" http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif " width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1
その方法ですが、ホームページビルダーの方を変える事にしましょう。
まず、管理画面にでている、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" alt="蝶の絵">
この部分のSRC="の直後から"までの部分を選択します。
選択の方法は、"の後ろでマウス左ボタンを押し、"の直前で放し、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
width="64" height="64" alt="蝶の絵">
という状態にします。
そして、先ほど出てきたコピーを行います。（コピーは１つしか記憶できませんので、先ほどのコピーはここで消えます。）
そして、ホームページビルダーで、newpage1.htmlを開き、「HTMLソース」タブでソースを表示します。
ソースの0001.gifの部分を選択して、「BackSpace」または「Delete」キーで消します。
ここで、貼り付けを行うと、
このようになります。
この状態で、「ファイルメニュー」の「上書き保存」を実行しましょう。
上書き保存とは、この状態で保存するという事です。
そして、上の赤い部分を先ほどと同じように、「コピー」します。
次に、楽天広場の管理画面で、ホームページ作成の下の「トップページ編集」をクリックします。（先ほどと同じ手順です）
そして、本文に貼り付け、「＠このHTMLを登録」ボタンをおします。
すると、エラーがなく、更新が終了しましたよね？
管理画面の上の方の（ページを確認する）をクリックして、ページを確認してみてください。絵と文字が表示されてますよね？
こうなります。
====今日はここまででーす。7/17====
【HTML（エイチティーエムエル）】
楽天広場でのホームページ作成では、普通に文章を書き込めば作成できます。
でも、それだと見栄えが悪いので、ちょっとしたホームページの作成の方法について解説します。
そこで、どうしてもHTMLについての解説をしなければなりません。うーん。
作成の段階では、ホームページビルダーを使おうと思っていますが、楽天広場の管理画面では、HTMLがそのまま表示されますので、ちょっとした基本は知っておいた方が便利に使えます。
【ホームページの仕組】
ホームページは、全てこのHTMLという 言語 で書かれています。
HTMLは、簡単な言語で基本は<xx> </xx>という集まりです。
このｘｘの事をタグと言います。
言語（げんご）
：
コンピュータに関わるソフトウェアは、全て、色々な方式に従った文字の集まりで作られています。この文字の集まりの形式（文法）の事をプログラミング言語といいます。
プログラミング言語には、C（シー）、C++（シープラスプラス、シープラプラ）などのアプリケーション作成用のものや、ホームページ用のHTML（エイチティーエムエル）、java script(ジャバスクリプト）などがあります。
コンピュータに関わるソフトウェアは、全て、色々な方式に従った文字の集まりで作られています。この文字の集まりの形式（文法）の事をプログラミング言語といいます。
プログラミング言語には、C（シー）、C++（シープラスプラス、シープラプラ）などのアプリケーション作成用のものや、ホームページ用のHTML（エイチティーエムエル）、java script(ジャバスクリプト）などがあります。
例えば、 このページを開いてください。 ←ここをクリックして下さい。
インターネットエクスプローラが開いて、私のホームページというのが表示されましたね。
そのウインドウの表示メニューをクリックして、「ソース」をクリックして下さい。
すると、めも帳が開いて、中に以下のような文字列が現れたと思います。
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY>
<H1>私のホームページ</H1>
<TABLE border="1">
<TBODY>
<TR>
<TD>楽天広場で</TD>
<TD>どきどきアフィリエイト</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY>
<H1>私のホームページ</H1>
<TABLE border="1">
<TBODY>
<TR>
<TD>楽天広場で</TD>
<TD>どきどきアフィリエイト</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
殆どのタグは、<XX>で始まり</XX>で終わりを示しています。
下に、ここに出てくるタグの解説をします。
| タグ | 解説 |
| HTML | HTMLで囲まれた部分が有効なHTMLです。 |
| HEAD | ブラウザには表示されない部分で、タイトル（ウインドウの一番上のバーに出てくるページ名）などの情報を入れます |
| TITLE | このタグで囲まれた文字列がページ名になります |
| BODY | ブラウザに表示される部分です |
| H1 | フォント（文字の種類）の中で見出しフォントを現します。 大きく表示されます。 |
| TABLE | 囲まれた部分が表になります。続いている「border ="1"」は、表の枠が１ピクセル（画面の１画素分）である事を示します。 これを２にすると、少し太い枠になります |
| TBODY | 表の中身を示します |
| TR | 表の行を表します |
| TD | 表の列を表します この例では、一行の中に２列が含まれています。 |
例えば、１～５までの数字を１行に並べようとすると、以下のようになります。
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD>
</TR>
これが、下の様に表示されます。
| 1 | 2 | 3 | 4 | 5 |
簡単でしょう？
このタグ達は、決して重なる事はありません。例えば、<TR><TD></TR></TD>の様にはなりません。
括弧と同じです。違う種類の括弧を使うときに、＜≪＞≫とはなりませんよね。括弧閉じは終になって＜≪≫＞こうなりますよね？それと同じ事です。
タグ開始とタグ終了の間にある文字は、ブラウザに表示されます。
ここまでは、判っていただけたでしょうか？判らない方は、掲示板かメールでお知らせください。
＝＝＝今日はここまでかな＝＝＝04/07/14
【ホームページで絵を表示する仕組】
ホームページには、色々な絵が表示されますよね？
あの絵の表示の仕組について、解説します。
ホームページを見ると、１つのページに文字があり、絵が配置されています。
これは、一つのファイル（パソコン上でのアイコン一つの単位の書類の事）に見えますが、文字はHTMLファイルにあり、絵は絵のファイルにあります。
ここのホームページを見てください。 ←ここをクリックして下さい。
「ホームページに絵を貼り付ける」というページが開いたはずです。
このページには、タイトルと鉛筆の絵が表示されていますよね。
ソースを表示してみる（表示メニューのソースを選択）と、以下のようになっていますね。
<HTML>
<HEAD>
<TITLE>ホームページに絵を貼り付ける</TITLE>
</HEAD>
<BODY>
<H1>ホームページに絵を貼り付ける</H1>
<IMG SRC="image/pic.gif">
</BODY>
</HTML>
<HEAD>
<TITLE>ホームページに絵を貼り付ける</TITLE>
</HEAD>
<BODY>
<H1>ホームページに絵を貼り付ける</H1>
<IMG SRC="image/pic.gif">
</BODY>
</HTML>
このタグは、これまでのタグの様に、終了のタグがないタイプのタグです。（</IMG>がない。）
この場所に、image/pic.gifという絵を表示する事を表しています。
その絵の本体は、 ここにあります。
このページは、トップフォルダとimageフォルダの構成になっています。
フォルダ
：
フォルダとは、ファイルを入れる箱の事です。その箱に名前が付いています。
あるフォルダの中には、またフォルダを入れる事が出来き、階層構造にする事ができます。
例えば、マイドキュメントというは、フォルダです。マイドキュメントフォルダの中にマイピクチャーフォルダとかがありますよね？（WindowsXPの場合）その事です。
フォルダとは、ファイルを入れる箱の事です。その箱に名前が付いています。
あるフォルダの中には、またフォルダを入れる事が出来き、階層構造にする事ができます。
例えば、マイドキュメントというは、フォルダです。マイドキュメントフォルダの中にマイピクチャーフォルダとかがありますよね？（WindowsXPの場合）その事です。
ここのページは、以下の様な構成になっています。
トップフォルダ
pic.htm
imageフォルダ
pic.gif
この意味は、トップフォルダには、pic.htmとimageフォルダがあり、imageフォルダの中には、pic.gifファイルがあるという事です。
.htmとか.gifは拡張子（サフィックス）と言われており、ファイルの種類を表しています。ソースのimage/pic.gifというのはimageフォルダの中のpic.gifファイルを示しています。。
.htmや.gif（ドットエイチティーエムやドットジフ）
：
これは、拡張子と言われており、ファイルの種類を表しています。
.htmは、HTMファイル、.gifのファイルは、gif(ジフ）ファイルと呼ばれます。
HTMファイルは、HTMLで記述されたファイルで、上にあるソースが書いてあるファイルです。中身が文字のファイルですね。
そして、gifファイルは画像が入っています。画像のなかには、gifファイルやjpeg（ジェイペグ）ファイル（.jpg）があります。
これは、拡張子と言われており、ファイルの種類を表しています。
.htmは、HTMファイル、.gifのファイルは、gif(ジフ）ファイルと呼ばれます。
HTMファイルは、HTMLで記述されたファイルで、上にあるソースが書いてあるファイルです。中身が文字のファイルですね。
そして、gifファイルは画像が入っています。画像のなかには、gifファイルやjpeg（ジェイペグ）ファイル（.jpg）があります。
という事で、このページは、文字情報がpic.htmファイルに記述され、その中でimageフォルダの中のpic.gifを表示しなさいという記述がされているので、ブラウザで表示した時には、鉛筆の絵が表示されるのです。
SRC=に続く部分の記述には、いろいろな方法があり、上記の例のように、トップから見た場所もしていできますし、インターネット上のURLでの指定もできます。
例えば、下の２つの鉛筆の左側の絵は、
<IMG SRC="http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif">
というタグで表示されています。
これは、 http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif ここの絵を貼り付けています。
=======今日はここまでかな7/15======
【楽天広場のトップページを作る方法】
絵を貼り付ける仕組がわかった所で、次は、楽天広場の自分のホームページのトップページを作る方法です。今回は、実際に試してみて頂きます。
今回からは、ホームページビルダーを使った方法で解説します。
【ホームページビルダーのインストール】
ホームページビルダーを持ってない方は、ホームページビルダーの体験版（無料）をインストールします。したのリンクをクリックして下さい。
http://www-6.ibm.com/jp/software/internet/hpb/download.html
ホームページビルダー体験版のページが開きましたよね。
表になっている部分の一括の部分の 「hpb8tp.exe (76,520,275 バイト) 」という部分をクリックします。
すると、名前をつけて保存というウインドウ（ダイアログ）が現れたと思います。
この状態で、保存ボタンをクリックします。
大きさが76MByte(メガバイト）あるので、ブロードバンドでない方はかなり時間がかかると思いますので、辛抱してください。Bフレッツや有線ブロードバンドの方は、１分程度で終了すると思います。
ダウンロードの完了ウインドウが開きますので、「開く」ボタンをクリックして下さい。
すると、インストールが始まりますので、指示に従ってインストールしてください。
【ホームページを作る】
ホームページビルダーを起動（スタートメニューのプログラムのホームページビルダー体験版をクリック）すると、「ホームページビルダーへようこそ」という画面が現れます。
「スタンダード」ボタンをおして、OKボタンを押してください。
すると、ホームページビルダーの画面になります。
「ファイル」メニューの「標準モードで新規作成」を選びます。
すると、ホームページビルダーの真ん中の領域がグレーから白になりました。
この白い部分にホームページを作ってゆきます。
今回は、絵と文字を入れた簡単なページを作ってみます。
まず、画面左に、緑の中に蝶が飛ぶ絵（下に0001.gif）変えてある絵があると思います。
（ない場合には、素材のタブをクリックして画面の中の「画像」を選びアニメーションをクリックして下さい）
そして、蝶の絵をマウスの左ボタンでドラッグ（押しっぱなしでマウスを移動）して、真ん中のホームページの領域にドロップ（マウスの左ボタンを離す）してください。
すると、ホームページの領域に絵が張り付きましたね。
そして、絵の少し右の白い部分をクリックすると、絵と絵の右の白い部分がピンクの四角い領域で囲まれたと思います。その状態で、右側の「段落」の中の「見出し１」という部分をクリックします。
これは、文字の書体を「見出し１」（大きな文字）にした事を表します。
そして、文字を入力します。ここでは、「どきどきわくわく始めてのホームページ」と入力します。
この状態でハードディスクに保存しましょう。
保存の方法は、「ファイル」メニューの「上書き保存」をクリックします。
すると、名前をつけて保存というウインドウが現れます。
上の部分の「保存する場所」の右側の四角い領域の右の逆三角をクリックします。
すると、場所のリストが出てきますので、マイドキュメントを選んでください。
ここに新しいフォルダを作り、その中にホームページを保存します。
新しいフォルダを作る方法は、保存する場所の右の四角い領域（今はマイドキュメントが選ばれている）の右３つ目の「フォルダのマークの右上角が光っている」アイコンをクリックします。
すると新しいフォルダが作られます。
この「新しいフォルダ」の名前を「myhp」と入力します。
ホームページのURLには、日本語は使えませんので、 半角英文字 で入力します。
そして、そのmyhpフォルダのアイコンをダブルクリック（２回クリック）します。
保存する場所の右側が「myhp」に変わりましたね。
そこで保存ボタンをクリックして下さい。
ファイルの名前は、newpage1.htmになったと思います。
素材ファイルをコピーして保存画面がでたと思いますが、そのまま「保存」ボタンを押してください。
フォルダの中身を確認してみます。
テスクトップ（ウインドウが何もない部分）のマイドキュメントをダブルクリックします。
すると、「マイドキュメント」のウインドウが現れます。
そのウインドウの中から「myhp」フォルダを見つけ出し、ダブルクリックします。
すると、myhpフォルダの中身が現れたはずです。
その中には、
0001.gif
newpage1.html
という２つのファイルがあるはずです。.htmlファイルは、.htmファイルと同じ扱いです。
出来たページは、こうなります。 ←ここをクリックしてください。
========今日はここまでかな。7/16=======
【いよいよ楽天広場のホームページにして見る】
昨日、作ったnewpage1.htmというホームページを楽天のホームページとして、表示する手順を説明します。
まず、ホームページビルダー８体験版を起動します。（スタートメニューのプログラムのホームページビルダーV8体験版のホームページ・ビルダーをクリックします）
すると、「ホームページビルダー８へようこそ」というウインドウ（ダイアログ）が現れます。
ここでは、キャンセルボタンを押してください。
すると、ホームページビルダーの画面になりましたよね。
ホームページビルダーのファイルメニューをクリックし、開くをクリックして下さい。
そして、newpage.htmlをクリックして、開くボタンをクリックします。
これで、昨日のページば現れたはずです。
（newpage.htmlが見つからない人は、昨日の手順で「マイドキュメント」→「myhp」を選んでください）
この状態で、中央の白いホームページのある領域の直ぐ上の「HTMLソース」とうタブを押します。
「ページ編集」「HTMLソース」「ページ/ソース」「プレビュー」のタブがあるはずです。
「HTMLソース」タブがない人は、簡単編集モードになっていますので、以下の手順で切替えます。
編集モードの切り替え
・「表示」メニューの「編集スタイルの切り替え」をクリックします
・ホームページビルダーへようこそ画面がでますので、スタンダードをクリックしOKを押します。
・これで、タブが増えたはずです。
「HTMLソース」タブをクリックすると、HTMLの中身が見えます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 Trial for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 Trial for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
</BODY>
</HTML>
具体的には、 <BODY>の直後から</BODY>の直前 までです。
上のソースでは、赤くしてある部分です。
ホームページビルダーで、上の２行（ホームページビルダーでは１行で表示されているはず）を選択します。
選択の方法は、一番左の<H1>の<の左でマウスのボタンを押し、押しながら１行分だけ下にずらします。（マウスボタンを押しながらマウスを動かす事をドラッグするといいます。）
すると、１行だけが黒く選択されます（文字は白抜きになります。）
その状態で、マウスボタンを離すと黒く選択されたままの画面になります。
この一行分を パソコンに記憶（コピー） します。コピーする方法は以下の通りです。
コピーする方法（３通りの方法があります<もっとある？>）
方法１：黒く選択されている部分で、マウスの右ボタンをクリックし、コピーを選択
方法２：「編集」メニューの「コピー」をクリック
方法３：キーボードの左下「Ctrl（コントロール)」を押しながら「C」を押して放す
最初は、方法１または方法２が判りやすいと思いますが、慣れると方法３が便利です。
ここでコピーしたものは、後ほど楽天のホームページの書込みに使いますので、覚えて置いてください。
【 楽天広場のホームページに書き込む】
楽天広場にログインしてください。これはもう出来ますよね？
インターネット画面を開いて、お気に入りから自分のページを選び表示します。
その後、右上にあるログインをクリックすると、自分の管理画面が表示されます。
そして、左側の操作メニューのホームページ作成の所にある、 「トップページの編集」 をクリックします。
すると、「トップページに好きな文章を掲載できます」という画面になります。
そして、本文とあり、その下に書込みができる四角いフィールドがあります。
その本文の四角いフィールドをクリックすると、四角内の左上に縦の5mmほどの棒が現れます。ここに入力してねというサインです。
この状態で、先ほどコピーした１行を貼り付けます。貼り付ける方法は以下の３通りあります。
貼り付ける方法（３通りの方法があります）
方法１：貼り付けたい場所で、マウスの右ボタンをクリックし、「貼り付け」を選択
方法２：「編集」メニューの「貼り付け」をクリック
方法３：キーボードの左下「Ctrl（コントロール)」を押しながら「V」を押して放す
先ほどの１行が、貼り付けられて表示されたと思います。
この状態で、「＠このHTMLを登録」ボタンを押してください。
下記、1箇所の入力エラーがあります。
そして、本文を書込むフィールドの下に
HTMLタグの記述に誤りがあります
1行目： src 属性の内容が不正です
と書いてあると思います。
その下の[HTMLエラー詳細情報を表示]をクリックして下さい。
ウインドウが開いて、エラーの状況が表示されます。
src属性の内容が不正ですの意味は、先ほどの１行のsrc=XXの部分に誤りがあるという事です。
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
この行ですね。
これは、ホームページビルダーでは、問題なかったのに楽天広場では何故エラーするのでしょうか？
それは、ホームページの構成にあります。
前回、「myhp」フォルダの中に、newpage1.htmlと0001.gifがあると解説しました。
でも、楽天広場のファイルの扱い方は、普通のホームページと違います。
このため、このエラーがでます。
どうすれば良いのでしょうか？
楽天では、画像は、HTMLファイルとは別に登録する必要があるのです。
画像の登録
まず、先ほどのエラー詳細情報のウインドウを「閉じる」ボタンを押して閉じます。
そして、楽天広場の自分の管理画面の左側のホームページ作成の３つ下の「画像の倉庫」をクリックします。
そして、 「登録する画像を選択」 の入力フィールドの右の「参照」ボタンを押します。
ファイルの選択画面が現れますので、ファイルの場所からマイドキュメントを選び、「myhp」フォルダを探してダブルクリックし、0001.gifを選択します。
開くボタンを押すと、 「登録する画像を選択」 の入力フィールドに以下の文字が入ったと思います。
[C:\Documents and Settings\yasuda\My Documents\myhp\0001.gif]
「C:」は、パソコンにより、Dとか他のアルファベットになります。
そして、 写真のタイトル にこの絵につける名前を入力します。
この写真のタイトルは、この絵を判別するために付ける名前で、楽天広場内でのみ有効です。例えば、「蝶の絵」にしましょう。
そして、「＠選択された画像を登録」ボタンを押します。
登録完了の画面が現れます。
これで、楽天広場にこの絵（画像）が登録されました。
確認してみます。
もう一度、管理画面の左側のホームページ作成の３つ下の「画像の倉庫」をクリックします。
すると、先ほど登録した絵が出ていますよね。ここで絵が出てこない場合には、登録されていませんので、再度挑戦してください。
その絵をクリックします。
すると、絵の下に、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" alt="蝶の絵">
の表示があります。
この絵のSRC="に続く部分が、登録した画像の場所になります。
ですから、下の0001.gifの部分をhttp://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif
にする必要があるのです。
<H1><IMG src="0001.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
したがって、下の様にすると表示できるようになります。（青い部分を変更）
<H1><IMG src=" http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif " width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1
その方法ですが、ホームページビルダーの方を変える事にしましょう。
まず、管理画面にでている、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" alt="蝶の絵">
この部分のSRC="の直後から"までの部分を選択します。
選択の方法は、"の後ろでマウス左ボタンを押し、"の直前で放し、
この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
| <IMG SRC=" | http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif | " |
という状態にします。
そして、先ほど出てきたコピーを行います。（コピーは１つしか記憶できませんので、先ほどのコピーはここで消えます。）
そして、ホームページビルダーで、newpage1.htmlを開き、「HTMLソース」タブでソースを表示します。
ソースの0001.gifの部分を選択して、「BackSpace」または「Delete」キーで消します。
ここで、貼り付けを行うと、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 Trial for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1><IMG src="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 Trial for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1><IMG src="http://plaza.rakuten.co.jp/img/user/51/87/6435187/2.gif" width="64" height="64" border="0">どきどきわくわく始めてのホームページ</H1>
</BODY>
</HTML>
この状態で、「ファイルメニュー」の「上書き保存」を実行しましょう。
上書き保存とは、この状態で保存するという事です。
そして、上の赤い部分を先ほどと同じように、「コピー」します。
次に、楽天広場の管理画面で、ホームページ作成の下の「トップページ編集」をクリックします。（先ほどと同じ手順です）
そして、本文に貼り付け、「＠このHTMLを登録」ボタンをおします。
すると、エラーがなく、更新が終了しましたよね？
管理画面の上の方の（ページを確認する）をクリックして、ページを確認してみてください。絵と文字が表示されてますよね？
こうなります。
====今日はここまででーす。7/17====
ジャンル別一覧
人気のクチコミテーマ
-
-
- 家電よもやま
- ゲーム専用ワイヤレスイヤホン「VR30…
- (2024-11-25 19:20:13)
-
-
-
- パソコンサポーターがすすめるパソコ…
- ◎新品 デスクトップパソコン HP 液晶…
- (2024-10-04 11:38:18)
-
-
-
- 【楽天市場】☆☆楽天おかいどくお買い…
- 【本日限定価格】【即納】裏起毛 ニ…
- (2024-11-27 23:05:51)
-
© Rakuten Group, Inc.
