|
チュートリアルで簡単！お小遣いサイトの作り方ＴＯＰ ＞ チュートリアル７〜お小遣いサイトの基本枠をつくる |
|
|
|
チュートリアルで簡単！お小遣いサイトの作り方ＴＯＰ ＞ チュートリアル７〜お小遣いサイトの基本枠をつくる |
|
|
|
|
|||||||||||||||||||||||||||||||||||||
| お小遣いサイトの基本枠をつくる | ||||||||||||||||||||||||||||||||||||||
|
もしもあなたがホームページ作り初心者だとしたら、いくらalphaEDITが使いやすくてわかりやすいソフトだとしても、やっぱり最初は難しく感じるでしょう。普段wordやexcelを使っているなら、とまどうことも多々あると思います。けど、なるべく早く慣れるようお御手伝いさせていただきますね。 まずは基本中の基本を説明。 ホームページは、文字・表・画像・水平線という、たった４つの組み合わせでできています。すべてはこれに集約されます。 このホームページで言えば、オレンジ色の枠は表ですし、
←これは表の背景に画像を組み合わせたものです。
↓これは水平線です。 あとはこの４つをいかにうまく活用するか、というだけなのです。 |
||||||||||||||||||||||||||||||||||||||
|
・・・基本をおさえたところで、alphaEDITのアイコンの活用法を説明すべきですが、これには公式ともいえるalphaEDITの使い方サイトがあるので、これらを参考にしながら勉強してきましょう！！ ・・・なんて手抜きでごめんなさい。しかし！世の中には本当に使えるサイトがたくさんあるんです。自分が使ってみた感想として、これらを利用することがalphaEDITに慣れる一番の近道だと思うわけです。言い訳がましいですけど・・・。ということで以下に私がお世話になりまくったサイトを３つ紹介しますね。
私からもひとつだけアドバイスしておきます。それは、web上で最初に表示させたいページ（トップページ）は、必ず「index」というファイル名でセーブしなければならない、というきまりです。あなたのホームページアドレスがhttp://aaa.fc2web.comだった場合、実際に表示される最初のページはhttp://aaa.fc2web.com/index.htmlとなるのです。誰が決めたのか知りませんが、そういうルールです。これは意外に陥りやすいミスですので、注意しましょう。 これではわかりづらいと思うので図で説明すると、
あなたのホームページアドレスがhttp://aaa.fc2web.comだった場合、実際に表示される最初のページ（トップページ）はindex.htmlとなります。逆に言えば、index.htmlというページを表示させるためには、 アドレスを意識しながらいろんなサイトを見れば、そのサイトがどういう階層構造をしているかわかるようになります。あなたもわかりやすい階層構造をつくり、トップページにはindexというファイル名をつけることを心がけましょう。（わかりやすい階層構造を持つサイトは、検索サイトで上位に表示させるための重要な要素と言われています。） なお、alphaEDITについて質問等がありましたら、当サイトの掲示板、またはお問い合わせを利用して聞いていただければお答えします。どんな些細なことでもかまいませんので、遠慮なくどうぞ。 お小遣いサイトの基本枠をつくる
ある程度alphaEDITに慣れたのなら、ここから実際にお小遣いサイトをつくってみましょう。まずはトップページをつくります。 トップページをつくることで、あなたのサイトのコンテンツ（内容）と全体的なデザインなどが決まります。しかし、コンテンツはあとからいくらでも増やすことが可能ですから、トップページをつくるときに一番重要なのは、全体的なデザインと言えるでしょう。 今までお小遣いサイトに限らずいろいろなサイトを見てきたことと思いますが、「このサイトはかっこいいな！」と思ったサイトはありませんか？まずはそういったサイトのデザインのかっこいいところをマネしてみるのがよいでしょう。表や水平線、画像をどのように使っているのか考えてみてください。 コンテンツはあとからいくらでも増やせるので、とりあえず以下のコンテンツを含んでいれば十分です。
例を作りました。この程度までできれば、次のチュートリアルに進んで結構です。参考にどうぞ。 →例 基本枠をつくるうえで、初心者が気を付けるべきことが４つあります。
【凝りすぎない】 【フレームは避ける】 【お問い合わせフォームをつくる】
←ここにあなたのメールアドレスを記入します。 ←メールの件名は空白でかまいません。
これでＯＫです。ゆくゆくは掲示板に発展させたいものですね。掲示板の貼り方は「チュートリアル２２〜無料掲示板を設置する」までお待ちください。 【著作権表示をのせる】 それでは、がんばりましょう！！トップページのファイル名は必ずindexにしてくださいね。こんな感じの枠組みが完成すればＯＫです。 トップページの作成がどうしてもうまくできない人は、このページの一番下に行ってみましょう。いいことあるかも。
続いて、テンプレートというものを作っておくと便利です。あなたのサイト内の各ページは、デザイン的にまとまっていたほうがきれいですよね。そこで、各ページに共通する部分をテンプレートとしてあらかじめ作っておくのです。なんかうまく説明できないですけど、↓こんな感じです。クリックすると拡大します。
文章の一番最初と一番最後に、サイトマップ的なものがありますね。これは、ホームページ作りの基本で、今開いているページがあなたのサイトのどこに位置するのかを示したものです。べつに２つもつける必要はありませんが、これだけでわかりやすさがぐんとアップしますので、つけるといいと思います。
聞きなれない言葉がでてきましたね。meta設定。これは一言で説明するのは難しいのですが、「作っているＨｔｍｌ文書の「性格」を表している」というとイメージが湧くかと思います。実際にやりながら説明します。alphaEDITを使っていない人でも、市販のHP作成ソフトであれば必ずmeta設定をする機能がついているはずです。探してみてください。 alphaEDITでは、まず「ファイル→ページのプロパティ」をクリックします。
↓するとこんな画面がでてきました。
ここで、「メタ設定」をクリックします。
続いて、「追加→基準スクリプト言語」をクリック。
「ＯＫ」をクリックします。 これは、「あなたが作っているＨＴＭＬ文書にはjavascript言語が含まれていますよ」という設定です。 同様に、「基準スタイルシート言語」も設定しておいてください。スタイルシートはまず間違いなく使うことになるであろう言語です。
続いて下にうつり、「追加→キーワード」をクリックします。
キーワードとは、Googleなどで検索するときにひっかけるための言葉です。「お小遣い,副収入,金儲け,アルバイト,インターネット,儲ける,稼ぐ」など、自分ならどういう単語で検索するか考えながら、決めてください。ちなみに、単語と単語の間は『,』（半角英数字のコンマ）でなければいけません。注意しましょう。 同様に、「説明文」も追加しておきましょう。説明文は検索結果のページに表示される内容ですから、あなたのサイトを一言でまとめた文章でなければいけません。
「著作者」はなくても問題ないですし、「検索ロボット制御」というのは検索されたくないときに付け加えるものなので気にしなくて結構です。 これでmeta設定は終了です。トップページとテンプレートの枠組みが完成して、それぞれmeta設定も済んだなら、次のチュートリアルに進みましょう！
正直、私のお粗末な言葉で説明してもなかなか理解できない人がいるのではないかと思い、テンプレートセットなるものを用意しました。百聞は一見にしかず。テンプレートセットをダウンロードし解凍すると、テンプレートセットというフォルダの中に、トップページ（ファイル名index.html）と各ページのテンプレート（ファイル名template.html）の２つが入っています。あなたのHP作成用フォルダの中にコピーして開いてみてください。大したものではありませんが、誰かの作りかけのホームページをいじる機会はなかなか無いと思いますので、参考になるかと思います。２次配布さえしなければ、どう使っていただいても結構です。そのまま使うのも加工するのも自由ですから、文章を変えたり、字体を変えたり、枠の色を変えたり、背景画像を入れたりしてオリジナリティーをだしてみてくださいね。meta設定も忘れずに☆
| ||||||||||||||||||||||||||||||||||||||
チュートリアル７の目標
「チュートリアル８〜お小遣いサイトのタイトルをつくる」へ