現在位置: Top/ホームページのちょっとしたテクニック
#author("2022-10-08T13:58:13+09:00","pekoe","pekoe")
ホームページ作成 ちょっとしたテクニック
* ホームページ作成ソフト [#eae64241]
#author("2022-10-08T14:00:25+09:00","pekoe","pekoe")
*ホームページ作成 ちょっとしたテクニック [#c060c980]
** ホームページ作成ソフト [#eae64241]

以前は、Frontpage Expressを使っていました。Internet Explorerに付属していて、見た目や操作がWordに近いということもあって、使っている人が多いようです。ただ、無駄にインデントしたり、エディタで書き加えたものや修正したものを壊してしまうのが難点。現在は、ホームページビルダーを使っています。

* シンプルなページを [#he4f429f]
** シンプルなページを [#he4f429f]

内容が濃いページほど、ページの構成はシンプルで、ページの移動などのアクセスもしやすい傾向にあります。

しかし、逆にトップページなどにこっているサイトも多く、表示までに時間がかかります。ダイアルアップだと分単位で待たされるページもあります。ホームページビルダーであれば、「どこでも配置モード」は使用してはいけません。

テクニックの披露をしたいのでしょうが、それはトップではない別の場所でおこなってほしいものです。フラッシュなどを使用するとか、「入り口」のページがあるとか(アクセス制限のあるページは除く)、いきなり音楽が鳴りだすページとかは、特に印象が悪いです。それだけで訪問者は一瞬で逃げてしまうことに気付かないのでしょうか。

* 正常に表示されるようにする [#wc523163]
** 正常に表示されるようにする [#wc523163]

いわゆる「文字化け」です。

 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

などというのをヘッダにしっかり記述すること。

ShiftJISは、Shift_JIS、JISコードは iso-2022-jp、EUCコードは EUC-jp となります。

* リンクが正常が調べる [#e3864823]
** リンクが正常が調べる [#e3864823]

よく見かけるのが、リンクがローカルのままだったりして、表示されないというもの。ページを開こうとするとフロッピードライブにアクセスしようとしたり、大文字小文字が間違っていたり・・・。孤島発見器 (http://hp.vector.co.jp/authors/VA014575/chicchi/ ) でリンク切れや、使われていないファイルを調べるといいでしょう。

* 色について [#b0e6d53c]
** 色について [#b0e6d53c]

印刷されて活用したくなるほどの情報が含まれているときは、黒バックで白文字のページは困ってしまいます。黒文字で、バックは薄い色 (できればバックは白) がいいと思います。黒バックで白文字のページは、印刷しておく価値がないと制作者が言っているようなものです。

バックの画像が濃いものも読みづらいです。

サイト全体の色を統一し、濃さでメリハリをつけるのが美しいとされています。そうすると特に目立たせたい部分に違う系統の色を使うだけで、目立たせることができます。

あるいは、淡い色で統一し、目立たせる部分を濃くするというのも見やすいでしょう。

* HTMLの文法が正しいかチェックしよう [#f5187373]
** HTMLの文法が正しいかチェックしよう [#f5187373]

http://validator.w3.org/ でHTMLが正しいかをチェックすることができます。英語のサイトですが、自分のWebページのURLを入れてチェックさせればいいだけです。

ホームページビルダーでも、HTML構文チェックの機能がありますが、デフォルトではかなり甘いので、設定を変えてから実行するといいでしょう。

「IEでご覧ください」なんて、ナンセンスなことを書かないで、どのブラウザでも表示できるようにしましょう。

* HTMLの表示時間を予想する [#hcfd5aa7]
** HTMLの表示時間を予想する [#hcfd5aa7]

ローカルで表示させたり、ADSLだったりすると、重たいページを作っても気付かないことがあります。そこで、HTML体重計 (http://www.geocities.co.jp/SiliconValley/5314/ ) を使って表示時間を測定させましょう。

* JAVAやJAVAScript、VBScriptは使用しない [#g87878af]
** JAVAやJAVAScript、VBScriptは使用しない [#g87878af]

これらのものは、機能をオフにすることができます。そうするとJAVAScriptでページの移動をおこなうように記述すると、他のページへアクセスすることができなくなります。

なお、CGIはサーバー側でHTMLを作ってから、読み手に送られるので、特に問題はありません。ただし、文字コードや文法チェックの必要はあります。

* 検索ロボットを操る [#p2636060]
** 検索ロボットを操る [#p2636060]

検索ロボットがWebサーバーのルートにあるrobots.txtをアクセスしに来ます。これは、このrobots.txtをみて、許可されていないディレクトリなどを判断するようです。

robots.txtを検索すると詳しい説明を探すことができます。次のURLは、その一つです。

 <nowiki>http://tohoho.wakusei.ne.jp/wwwxx079.htm</nowiki>(※現在リンク切れ)

自分のページ内では、

 <meta name="keywords" content="ここにキーワードをカンマで区切って記述する">
 <meta name="description" content="ページの簡単な説明を記述する">

と入れておくと検索ロボットが拾っていってくれるらしいです。

逆に

 <meta name="robots" content="NOINDEX,NOFOLLOW">

と記述すると検索ロボットは、無視するようになります。私の別のページで、もう何年もアクセスの多いサイトなのに検索されないようにできているページがあるので、きちんと機能しているようです。

* favicon.ico [#z8575790]
** favicon.ico [#z8575790]

Internet Expolorerのお気に入りに登録すると、そのページのオリジナルのアイコンになるものがあります。こうするには、HTMLのヘッダ部分に次のようなものを書きます。

 <nowiki><LINK REL="SHORTCUT ICON" HREF="http://www.tpot.tk/favicon.ico"></nowiki>

マイクロソフトに詳しい説明があります。

http://www.microsoft.com/japan/msdn/web/ie/ie50/icpie5.asp

なお、MozillaやNetscape7では、常時、設定したアイコンが表示されます。これもおもしろいですね。

* Nutscrape/1.x (CP/M; 8-bit)って何? [#w65ef27b]
** Nutscrape/1.x (CP/M; 8-bit)って何? [#w65ef27b]

アクセス解析をしていると「Nutscrape/1.x (CP/M; 8-bit)」っていうブラウザでアクセスしてくる人がいます。Netscapeではないし、CP/M 8ビットって随分昔のコンピュータかな? と思ったら、Linuxで家庭内LANなどを構築している場合、Squidというプロクシ兼キャッシュサーバーでこれらの情報を自由に設定できるようです。そのデフォルトが「Nutscrape/1.x (CP/M; 8-bit)」のようです。ときどき、IternetExplorerのありもしないバージョンとか、Windowsのありもしないバージョンでアクセスするのも、きっとこれなのでしょう。

* <nowiki><small></nowiki>と<a href>のネスト [#de8e221b]
** <small>と<a href>のネスト [#de8e221b]

マックのInternet Explorer 5では、<nowiki><small></nowiki>タグが<a href>の内側にあると表示がおかしくなることがありました。スタイルシートで、a:hover で背景色を指定している場合は、気をつけましょう。

* トップページのリンクは、index.htmlをつけないURLにする。 [#w86623bd]
** トップページのリンクは、index.htmlをつけないURLにする。 [#w86623bd]
index.html付きと混在するとリンクされるときにバラバラになり、ページランクの付き方にも影響する。

* ディレクトリ名で終わるURLは、スラッシュを忘れない。 [#n0944e13]
** ディレクトリ名で終わるURLは、スラッシュを忘れない。 [#n0944e13]
スラッシュがないと本来ファイル名として扱われるが、サーバーの補完機能が働き、ファイルとして存在しないことを確認した後、ディレクトリとしてindex.htmlなどを探す。なので、トップの場合もスラッシュをつけることを忘れないように。
index.htmlなどの省略は、所詮index.html、index.htm、index.cgi、index.php程度の補完なので、負担にはならない。むしろ、あとからindex.htmlからindex.cgiをトップにすることも考えられるので、index.htmlの指定はない方がいい。

* 文字の強調はstrongを使う [#r4400574]
** 文字の強調はstrongを使う [#r4400574]
文字を強調するとき、ボールドや字の大きさを変えたり、色を変えたりといろいろ工夫しますが、strongタグを使うのが一番いいそうです。

* 写真の扱いに注意する [#odbcf7f5]
** 写真の扱いに注意する [#odbcf7f5]
写真には、撮影した人に著作権があるので、他人が撮影したものを無許可で使ってはいけません。もちろん、他のサイトの写真を勝手に自分のサイトで使うこともいけません。リンクで組み込むことも同様です。
肖像権があるので、他人が写っている写真の扱いも注意が必要です。さらに金閣寺などの建築物にも肖像権が適用されるものもあるので、注意が必要です。

* 英数字は半角 [#r51757a6]
** 英数字は半角 [#r51757a6]
一部の日本語変換ソフトは、オンにしておくと英数字が全角で入力されるものがあります。おかしな仕様としか言いようがないのですが、入力する側で注意する必要があります。

* 不要なページをクロールさせないようにする [#waf20e3a]
** 不要なページをクロールさせないようにする [#waf20e3a]
 rel="nofollow"