|
| |
|
ホーム・ページを作ったことがなくても絶対にダイジョウブ！
便利ツールを利用しておしゃれなネットショップがあなたにも簡単に作れます！ |
それでは、先ほどのｂａｂｙ’ｓ ｈｏｕｓｅさんの無料テンプレートを使って雑貨ショップを作る製作手順を
具体的に解説してみましょう。
ｂａｂｙ’ｓ ｈｏｕｓｅさんのトップページに用意されているアフィリエイト用テンプレート集見本の中から
あなたが使いたいデザインのタイプを決めましょう！ 各テンプレートにはアフィリエイトであなたが
紹介したい商品の写真（画像）を挿入するスペースとその商品を紹介するスペース（値段、コメント用）が
設けられていますから、あなたは何の雑貨を売るネットショップを作りたいのかを決めてから、テンプレートの
デザインを選んだ方がいいです。 扱う商品のタイプによって写真（画像）が ” 大きいほうがよいのか？ ”
” 小さくてもかまわないのか？ ” が変わってきますから、まずはその点を考慮してみてください。
挿入スペースのサイズは width="数値"（幅のサイズ） height="数値"（高さのサイズ） というタグの数値を
変えれば簡単に大きくも小さくも変更することができるようになりますが、初心者が適当に変更すると全体の
バランスが悪くなる場合がたぶんにありますからその点は気をつけてください。
width と height のＨＴＭＬタグを実感してもらうためにも、試しにテンプレート用ソースの中のどこかの
挿入スペース（枠）数値を変えてみてください。ソースだけではどう変わったかが初心者にはわかり
にくいですが、これをビルダーのプレビュー画面表示にしてみると、白枠の大きさが変化しているところが
あるのにすぐに気付くと思います。 そのことによって、サイズが変化した白枠を構成しているソースの
場所がどこなのかがわかりますからＨＴＭＬタグの勉強にもなりますよ！
どのテンプレートを使うかが決まったら、その画像をクリックして拡大表示のページにしましょう。
画像の下に ” このテンプレートのソース（別ページになっているパターンもあり・・） ” と書かれている
枠内のソース（アルファベット記号のかたまり！）をすべてコピーします。
このサイトの製作者の方がわかりやすく表示してくれてますから、頭の <CENTER> というところから
一番最後の </CENTER> の記号のところまでをぜ〜んぶコピーしてください！
コピーの方法はわかりますか？ 今までホームページを作ったこともなければわかりませんよね？
<CENTER> の頭の部分にカーソールをあわせて、左クリックしたままマウスを動かしてゆくとアルファベットの
タグ部分が反転して選択されます。 その状態を一番最後の </CENTER> の部分まで選択して右クリック
すると作業ウィンドウが開きますから、反転したままの状態で、その中のコピーを選んで左クリックすれば
作業完了です！ （ 編集メニューからコピーを選択する方法でもＯＫです
）
|
<CENTER> を反転すると ⇒ |
<CENTER> |
のようになります。 |
ちなみに、わたしがこのサイトで使用している有料テンプレートの場合は、決めたサイトがファイルごと
ビルダーの中にはいりますから、テンプレートのソースをコピーして移動する必要はありません。
次にあなたのパソコンにインストールされたホームページビルダーのアイコンをダブルクリックしてソフトを
起動してください。 ビルダーの画面が表示されたら、『 新しいサイトを作る
』 からトップサイトの製作画面を
選択し、『 ＨＴＭＬソース 』 の編集画面を出してください。
<!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 9.0.0.0
for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
|
このようなアルファベットが並んだページがあらわれますから、この中の下から２番目に書かれている
<BODY> と </BODY> の間にマウスでカーソールをあわせてください。
<BODY>｜</BODY> のような感じになります。
カーソールをあわせたら、マウスを右クリックして作業ウインドウを表示させましょう。 その中の 貼り付け を
選択して左クリックすると、先ほどコピーしたテンプレートのソースが全部
<BODY> から </BODY> の間に
埋め込まれたはずです。 わたしの苦〜い経験をもとにしてかなりわかりやすく解説したつもりなんですが、
チャンとできましたよね？？
コピーした <CENTER> から </CENTER> までのソースがキチンと貼り付けられているのが確認できたら
編集画面を 『 ＨＴＭＬソース 』 から 『 プレビュー 』 にかえてみましょう。 どうですか？
先ほどｂａｂｙ’ｓ ｈｏｕｓｅさんのサイトであなたが選択したのと同じデザインのＨＰの画面になっていませんか？
これでテンプレートをあなたのパソコンのビルダー内に移すことができました。
これらの一連の作業はパソコン用語で 『 コピー＆ペースト 』 といわれる方法ですが、ワードも使ったことが
無い超初心者？の方にはこれすらも知らなかったと思いますから憶えといてください。わかりやすく解説すると
” ある部分をコピー ” してそれを ” 他の箇所へ貼り付ける ” ということです。
これから先あなたが扱う商品を仕入れてＨＰに表示させるのは、すべてこの
『 コピー＆ペースト 』 の作業の
繰り返しになります。ＡＳＰが発行してくれる商品ソースをコピーしてあなたのＨＰの表示させたい箇所に
貼り付けることによって、その商品をネット上で紹介できるようになるんです。
わたしも最初はこの 『 コピー＆ペイスト 』 さえわかりませんでした・・ 初心者用の解説本を買って操作して
ましたが、その本文中でも 「 この○○をコピー＆ペーストして・・・ 」
と書かれてましたが、意味が解らないと
操作もできません・・ 書いている専門家の著者にすれば ” いくら初心者向けでも、これくらいは知ってるだろう ”
と考えてしまうんでしょうが、初心者なんだから初歩からわからないんです・・
だいたいパソコン関係は専門用語が多過ぎます！ そう思いませんか？
「 ○○を××して△△する 」 するなんて簡単に書かれても、○○も××も意味がわからないんだから
△△しようにもどうすればよいのかがわから〜ん！ 誰が呼んでもわかるように解説しないと解説本を
買った意味がありません！ （ 本のタイトル部分に ” 誰でもできる！ ”
と書くんじゃないぞぉー！ ）
知識のある人が書くとどうしてもそのようになるんでしょうけど・・・
わたしがリアル雑貨店開業のためのノウハウを提供している ” 小さな雑貨店で素敵にひとかせぎ！
” の
別サイトでも、商売をしていれば、下代、上代、バックリベート などはあたりまえの商用用語ですが、これから
はじめて自分のお店を作ろうとしている人にとっては、たぶん意味が解らないだろうと思って、できるだけ詳細に
用語解説をしているつもりです。
このサイトを見てくれてる人も、ほとんどはこれからはじめてネットショップを作ろうとしている人たちでしょうから
最初のＨＰ作りにさんざん苦労したわたしなりにできるだけ、できるだけ簡単な作業から理解できるように
解説させていただくつもりですので、超初心者の人もご安心ください！ ただしビルダーの取り扱い方法に
関しては、ソフトに付いているマニュアル本の方が詳細に解説している場合は、はぶかせてもらいます。
|
|
 |
|
|
先ほどの ” コピー＆ペースト ” の作業でテンプレートをあなたのパソコンに移動できましたから、これから
先はホームページビルダーのソフトを使って、いろいろあなたのオリジナル風にアレンジすることができます。
たとえば、ビルダーの ” ページ編集 ” の作業画面でカラーパレットを使えば、マウスポインターで指定・
選択した箇所の背景色や文字色などを簡単に変えることができます。 ビルダーに移してきたテンプレートの
色を数箇所変えただけでも、デザインによっては全体の雰囲気がかなり違った感じになることもよくあります。
あなたの感性でテンプレートをどんどんアレンジしていけば、はじめの状態とはまったく違ったあなただけの
オリジナルなネット雑貨ショップに変身させることもモチロン可能です！
また、アフィリエイト商品を紹介するためにテンプレート内に用意されている空欄の白枠の数も、ビルダーの
操作ボタンひとつで簡単に増やしたり削除したりできますから、マニュアル本を読んで、ごく基本的な操作
方法だけは把握しときましょう。
ビルダーの上部に並んでいる作業ツールの各マークにポインターをあててゆくと
” 表の挿入、 行の追加、
列の追加、行の削除、文字サイズ拡大、太字・・・” などの説明文がそれぞれに表示されますから、
各操作マークでなにができるのかは一応覚えておいてください。
” ページの編集 ”の作業画面 で色を変えたり、表を増やした後に " ＨＴＭＬソース "の作業画面 にビルダーを
切り替えると色をあらわすタグや表をあらわすタグが追加されていることがわかると思います。 たとえば、
カラーパレットを使ってＡの白枠を赤色に変えてみるとその部分のＨＴＭＬソースに
” color="#ff3300" ” という
タグ（記号）が挿入されるようになります。
色を指定する方法は、ｂｌａｃｋ，ｎａｖｙ，ｇｒｅｅｎ などと、色名を半角英で記入する ” カラーネーム式 ” と
先ほどの赤色で表示された #ff3333 のように６桁の半角英数字で記入する ” ＲＧＢ値式 ” の２通りが
ありますが、一般的には微妙な色使いを表現しやすい ” ＲＧＢ値 ” を指定するほうが便利だと思います。
ビルダーではカラーパレットで色を指定すると色見本の下の部分に ” ＲＧＢ値 ” も表示されますから、
「 この色の番号は○○○なんだ 」 とすぐにわかります。 ちなみに 黒色は #000000 白色は #ffffff
ブルーは #0000ff というように決められています。
表を構成すタグは ” <TABLE> 〜 </TABLE> ” なので、この表の色（背景色）を白から、赤に変えると
<TABLE bgcolor="#ff3333"> 〜 </TABLE> というようになります。さらに表の大きさを指定する場合は
width="数値" （横幅） height="数値" （高さ） を付け加えるようになりますから
<TABLE bgcolor="#ff3333" width="100" height="100"> 〜 </TABLE> に変化します。
ＨＴＭＬも各タグ（記号）の役割さえ覚えてしまえば、けっこう簡単に理解できるようになりますから、まずは
練習のつもりで ” ページ編集 ” で行ったいろいろな作業が ” ＨＴＭＬソース ” でそれぞれどのようなタグに
なってソース内に記入されているのかを観察してみてください。
※ はじめてHPを作る人にとって、なんらかの参考になるように、ビルダーを使ったサイトの制作過程を
掲載してみましたので、興味のある方はこちらをどうぞ！
>>> サンプルサイト.１ の製作過程を見る！！
>>> サンプルサイト.２ の製作過程を見る！！
|
|
ＨＰの製作手順
