サイト制作・運営の基本と注意点

　Top Page　＞　ハッタリ超不定期通信　＞　音楽系サイト作成支援　＞　サイト制作の基本と注意点②

サイト制作の基本と注意点
基本さえおさえれば後はカンタン！

さて、サーバーを借りて、なんとかサイトを制作したら、
やっぱりより多くの人たちにサイトを見てもらいたいと思うのは当然よね♪

でもどうすればいいのかしら？？

ハッタリ君

ちょっと待った！

サイトをより多くの人に見てもらいたいのは解るけど、
つーか、サーバーを借りただけではまだまだだよハタミちゃん！(笑)
そこらへんの説明も簡単にしていかないとね♪

ウェブサイトは日本全国に、いや、世界を相手に情報を発信できる。

それは、とても素晴らしいことだけど、
同時に、とても恐いことなんだ。

それをまず頭に入れておかないといけないと思うんだ。

自分の発言が誰かの不快になりはしないだろうか？とかね。

だけど、人間、自分を嫌いにならない人が一人もいないはずがないので(笑)、
あまり神経質になりすぎるとサイトなんて運営できない(笑)。

ある程度の最低限のマナーを守れば、あとは自分がやりたいようにやったらいいと思うよ♪

何かに抑制されたようなフィルターのかかった情報にあまり価値はないと思うからね。
自分を出せば出すほど、その情報は生きてくると思う。

だけど自分を出す事で他人に不利益がでては困るけど、完璧な運営なんてのは、正直無理な話なんだ。
まぁ、モラルをもってやることが大事かなと思う。

特に気をつける事とかはあるかしら？？

ハタミちゃん

ハッタリ君

うーん、そうだな…。

まず個人情報の関連は注意が必要。

自分のサイト上に自分のメールアドレスを載せるのは危険だね。電話番号なんてもってのほか(笑)

それでも掲示板では不適切と思われる連絡の際の連絡先を示したい場合は、
メールフォームを使うのがいいと思うよ♪
これならメールアドレスを公開することなく、メールのやり取りができるんだ。

どうしてもメールアドレスを記載しないといけないような場合(商取引をする際など)は、
メールアドレスをテキストではなく画像で貼り付けると迷惑メールを防げると思う。

そこらへんに注意してサイトを作っていけばいいわけね♪

サーバーも借りたし、さて！
早速ページを作っていこうと思うんだけど、どうすればいいのかしら？
ハタミちゃん

ハッタリ君

まず、ウェブサイトというのは、
ＨＴＭＬ(HyperText Markup Language)
という言語で作成されているんだ。
　HTMLは文書の論理構造や見栄えなどを記述したもので、文書の中に画像や音声、動画、他のページへのーリンクなどを埋め込むこともできる。ウェブページはそれらのHTMLで記述された文書と他の文書をリンクさせることで構成されていて、このリンクという機能こそが、ウェブサイトの真骨頂なんだ。

う～ん、難しそうね･･･
そんな宇宙語みたいな文書をどうやって作っていくのかしら？
ハタミちゃん

ハッタリ君

ＨＴＭＬはある程度の知識がないと自分で書いていく事は難しいと思う。

でも、ホームページビルダーなどのソフトを使ってより簡単にサイトのページを作る事もできるんだ♪

最終的には、自分でＨＴＭＬをある程度勉強して理解した方が、自分が思う通りにページを作成できるし、ページを修正する時にもＨＴＭＬは扱えた方が断然便利なんだ。
　ブログなどをやる場合でも、ＨＴＭＬをある程度理解していれば、オリジナリティー溢れるページのデザインに改造できたりもしやすいんだ。

HTML文の中で、「タグ」というものを埋め込んで色んな表現をしていくんだけど、

そこらへんについては、説明すると長くなりすぎるので、

ＨＴＭＬを勉強してみようと思った人は、「ＨＴＭＬ　タグ　講座」などで検索してみよう♪

検索用語を入力検索フォームを送信

とりあえず、ＨＴＭＬを自力で作成しようと思ったら何が必要なのかしら？

ハタミちゃん

ハッタリ君

ＨＴＭＬは基本的にテキストのみで成り立っているので、

「メモ帳」だけでも作成可能なんだ。

だけど、ＨＴＭＬ作成のためのもっと便利なテキストエディタがあるので、ちょっと紹介しよう。

TTTEDIT
(フリーソフト)

使えば使うほどに、その便利さに感激するソフトで、オイラはいつもコレを使わせてもらっているんだ♪

さて、

ＨＴＭＬの基本構造は、

<html>
<head>
<title>ページのタイトル</title>
</head>
<body>

本文(主にここが実際のウェブページ画面の大半を占める)

</body>
</html>

これだけでもとりあえずページを作成したことになるんだ。

この状態からさらに背景の色や文字の色などを加えていって自分の意図したページにしていくんだ。

よく使うようなちょっと簡単なタグを教えて欲しいなぁ～。
ハタミちゃん

ハッタリ君

うーん、そうだな、じゃぁ、文字を色々と装飾するタグを一部紹介してみよう。

<font color="#ff0202">文字が赤色になります</font>
上のように入力すると、
結果→文字が赤色になります

こうなります。

カラーだけでなく、大きさなども設定できますよん。

<font size="5" color="#2802ff">青い色の大きいフォントに</font>
　↓
青い色の大きいフォントに

ふむふむ。

<ナントカ>文字</ナントカ>
みたいな感じで文字を挟む感じね？

なんとなく雰囲気が解ってきたわよ♪

ハタミちゃん

ハッタリ君

そう！

基本の感覚さえつかめば、あとはタグ講座みたいなページを参考にして、いくらでも思ったとおりに自分のページが作れると思うので頑張ってね♪

メモ帳やテキストエディタで、ＨＴＭＬを作成したら、その保存やサーバーへのアップロードはどうするの？
ハタミちゃん

ハッタリ君

そのまま保存するとテキストファイル（拡張子がtxt）になってしまうので、
「名前をつけて保存」をクリックしたら、ＨＴＭＬファイルとして、
「ファイル名.html」と自分で打って保存しよう。

ちなみにサイト制作をする時、まずトップページを作ると思うけど、
トップページのファイル名は必ず
「index.html」
にしよう。

例えば、
ヤキニクオメガという無料サーバーをレンタルしたとして(謎)、
そのトップページのアドレスは、
http://yakiniku-omega.1234.com/
となる。
このアドレスにファイル名は含まれていないが、実際は、
http://yakiniku-omega.1234.com/index.html
と同じなんだ。

サイト全体のトップページに限らず、ディレクトリの中のトップページのファイル名は、必ず「inde.html」になるんだ。

焼肉のサイトの中にビールについてまとめたページを別のディレクトリにファイルを構成したとしたら、そのビールに関するページのトップは、

http://yakiniku-omega.1234.com/beer/

イコール、
http://yakiniku-omega.1234.com/beer/index.html

となる。

同じサイト内で、「index.html」という同じファイル名が別フォルダ内で存在する状態なわけだから、ローカル(自分のＰＣ)側のファイルの管理もキッチリやった方がいいと思う。

あ！そうだ！ちなみにウェブサイトにアップするあらゆるファイル名は
半角英数字にすること。

うーーーん…

あまりよく、、、

わ・か・ん・な・い…(笑)

ハタミちゃん

ハッタリ君

制作していくうちに解るようになってくると思うよ♪
(↑無責任/笑)

なんとかＨＴＭＬ文ができたら、今度はそれをサーバーにアップする。

これは、色んな方法があるけど、一番簡単な方法は、

ファイル転送ソフトを使う

一番有名なもので、

FFFTP

というソフトを使うのが簡単だと思う！

ホストの設定などは、
借りた無料サーバーの説明書きなどのところを見れば解ると思う。

ＨＴＭＬとファイルの転送さえ解れば、あとは自由だーーー！(笑)

ちなみに画像などをアップした時に、画面にその画像を表示させたい時には、
その画像のＵＲＬを表記するのだけど、
そもそも画像ＵＲＬって？
と思う人もいると思います。

例えば「Picture-01.jpg」という画像ファイルを
さっきのヤキニクオメガというサーバーの１番トップのディレクトリに転送したとすると、

その画像ＵＲＬは、

http://yakiniku-omega.1234.com/Picture-01.jpg

となるんだ。

ファイル名は大文字か小文字かも区別されるから打ち間違いなどに注意しよう。
それが面倒なら、アップする時に、すべてを小文字にする設定も転送ソフトでできるので、小文字で統一するなどするとイイかもしれないね♪

以上！

サイト制作の基本を簡単に紹介しました。

次は、音楽系サイトを制作する上で大切な知識を紹介していこうと思います。

→音楽系サイト制作の必須アイテム

←Top Page 　｜　音楽系サイト作成支援：目次