タイトル
万馬券を応援します
make web
競馬サイトを作ろう！
┣・なぜ「競馬」なのか?
┣・目的としての経済
┣・本サイトを例に見る
┣・準備する
┣・テクニック
┣・アフィリエイトの活用
┣・再訪者を生む方法
┣・「まぐまぐ」の問題点
┣・急がば回れ！①
┣・急がば回れ！②
┗・役立つツール
　【競馬関係】
　┣ニュースの配信
　┗データベース

　【その他】
　┣時計を飾る
　┣一行ニュースの配信
　┣アンケートを実施
　┣拍手でサイトを応援
　┣データコード作成
　┣ＩＤコードの短縮
　┗天気予報を表示

　【管理系】
　┣アクセスを管理する
　┣Fileサイズのチェック
　┣IPドメインSEARCH
　┗ＨＰの過去を検索

■ スクロールバーの色を自由に変える （※ＩＥで可）
スクロールバーを変えただけでもページ全体の印象は変わるものです。
あなたのサイトのイメージに合った色使いをすれば、より印象深いサイトに生まれ変わりますよ！
このページのスクロールバーを参照下さい。（青色でしょう？）　ソースは以下のようになります。

※HTMLソースのHEAD区間に貼り付けましょう。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<STYLE type="text/css">
<!--
body {scrollbar-face-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#3366FF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#3366FF; scrollbar-3dlight-color:#3366FF; scrollbar-darkshadow-color:#FFFFFF}
-->
</STYLE>

◆ 貼り付け例：
<html>
<head>
<title>穴サイトＪＡＰＡＮ</title>
<STYLE type="text/css">
<!--
body {scrollbar-face-color:#FFFFFF; scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#3366FF; scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#3366FF; scrollbar-3dlight-color:#3366FF;
scrollbar-darkshadow-color:#FFFFFF}
-->
</STYLE>
</head>


下は精細です。赤字の部分が色の指定となりますので、
あなたのお好みにあわせて変えてみてください。

バーの表面の色 scrollbar-face-color:#FFFFFF;の#FFFFFF
バートラックの色 scrollbar-track-color:#FFFFFF;の#FFFFFF
矢印の色 scrollbar-arrow-color:#3366FF;の#3366FF
外枠の色１ scrollbar-highlight-color:#FFFFFF;の#FFFFFF
外枠の色２ scrollbar-shadow-color:#3366FF;の#3366FF
外枠の色３ scrollbar-3dlight-color:#3366FF;の#3366FF
外枠の色４ scrollbar-darkshadow-color:#FFFFFF;の#FFFFFF

■ オンマウスで文字の色が変わる（リンク）
リンクでのちょっとしたアクセントにどうぞ。いわゆる小技と言うやつです。
穴サイトＪＡＰＡＮ

リンク文字にマウスポインタをのせた時に、文字の色がかわります。

ソースは以下です。※HTMLソースのHEAD区間に貼り付けましょう。
上記「スクロールバーの色を自由に変える」項の「貼り付け例」参照。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<STYLE type="text/css">
<!--
A:hover {color:#0000FF}
-->
</STYLE>

赤字の部分がマウスポインタをのせた時の文字の色の指定項です。
#0000FF の部分を変えてあなたの好みの色に変えてください。

■ リンクに触れたとき、リンク先の情報を表示する
これは簡単ですね。でもこれだけでもクリック率はあがるものなのです。
穴サイトＪＡＰＡＮ

リンク文字にマウスポインタをのせた時に、リンク先の情報やコメントが表示されます。

ソースは以下です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<A href="URL" title="表示させたい文字">リンク先</A>

このリンクの上にマウスをもっていくと、「title」で指定した文字が表示されます。
"表示させたい文字" の部分を表示したいコメントにお代え下さい。

■ パソコンの画面や好きなウインドウを「画像」にする
意外に知られていないのがこの機能のようです。「ｇｏｏ」カテゴリーを参照されるとよいでしょう。使い方一つで非常に効果のある手段になると思います。
あなたのパソコンのキーボードをご覧下さい。
「PrintScreen」もしくは「PrtSc/Sys Rq」などと書かれたボタンが付いていると思います。
（右上段辺りにあるのではないでしょうか。）
これが、パソコンの画面全体を画像にすることができるボタンです。
以下が使用法になりますよ。

１．どんなソフトでも構いませんので、まずは画像ソフトを開いてください。
２．次いで撮りたいホームページにアクセスし、画面を表示。
３．「PrintScreen」ボタンを押してください。（これで画面がコピーされた状態になります）
４．画像ソフトで「新規作成」。
５．張り付け（右クリック「貼り付け」もしくは Ctrl+v）ををすればペースト完成です。

（例）
画像
ＪＲＡホームページ

■ 表を半透明にする （※ＩＥで可）
こちらも小技の一つです。これだけでもサイトに清潔感が生まれます。

この表は透明度を５０にしています。

半透明なので、背景が透けて見えます。


ソースは以下です。
まず、上段のものを表示させたい場所のHTMLソースに貼り付けましょう。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<span id="S1">
この表は透明度を５０にしています。
<br><br>半透明なので、背景が透けて見えます。
</span>
</td>
</tr>
</table>

次に下のソースをHEAD区間に貼り付けましょう。

ソース
<STYLE type="text/css">
<!--
#S1{
filter:alpha(opacity=50);
background-color:#3366FF;
color:#FFFFFF;
width:400px;
padding:5;
}
-->
</STYLE>

透明度・背景の色・文字の色・横幅・内部スペースは下記赤字の箇所で指定します。

透明度 opacity=50 の 50 （ 0 で透明、100 で不透明）
背景の色 background-color:#3366FF の #3366FF
文字の色 color:#FFFFFF の #FFFFFF
横幅 width:400px の 400
内部のスペース padding:5 の 5

■ よこにスクロール
これもよく見られる小技です。
ヨコへまいりま～～す。

ソースは以下です。
表示させたい場所に貼り付ければ完了です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<marquee width="400" style="font-size:15px; color:#ff0000" scrollamount="3" scrolldelay="80">ヨコへまいりま～～す。</marquee>

文字を表示する幅 width="400" の 400
文字の大きさ font-size:15px の 15
文字の色 color:#ff0000" の #ff0000
移動する量 scrollamount="3" の 3
移動するスピード scrolldelay="80" の 80

■ たてにスクロール
上の応用です。
タテにまいりま～～す。

ソースは以下です。
表示させたい場所に貼り付ければ完了です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<marquee width="115" height="40" style="font-size:13px; color:#0000ff" scrollamount="1" scrolldelay="100" direction="up">タテにまいりま～～す。</marquee>

文字を表示する幅 width="115" の 115
文字の大きさ font-size:15px の 15
文字の色 color:#0000ff" の #0000ff
移動する量 scrollamount="3" の 3
移動するスピード scrolldelay="80" の 80

■ あなたのサイトを「お気に入り」に追加する （※ＩＥで可）
クリックすると、「お気に入り」登録画面が表れます。
お気に入りに追加

ソースは以下です。
表示させたい場所に貼り付ければ完了です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<A href="JavaScript:window.external.AddFavorite
('http://www.zephyr.dti.ne.jp/~ginji/', '穴サイトＪＡＰＡＮ')">お気に入りに追加</A>

あなたのサイトのものに変更してください。
サイトＵＲＬ ('http://www.zephyr.dti.ne.jp/~ginji/', の http://www.zephyr.dti.ne.jp/~ginji/
サイト名 '穴サイトＪＡＰＡＮ') の 穴サイトＪＡＰＡＮ


こちらはボタン形式のものです。

ソースは以下です。
表示させたい場所に貼り付ければ完了です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<INPUT type="button" value="お気に入りに追加"
onClick="javascript:window.external.AddFavorite('http://www.zephyr.dti.ne.jp/~ginji/','穴サイトＪＡＰＡＮ')">

あなたのサイトのものに変更してください。
サイトＵＲＬ ('http://www.zephyr.dti.ne.jp/~ginji/', の http://www.zephyr.dti.ne.jp/~ginji/
サイト名 '穴サイトＪＡＰＡＮ') の 穴サイトＪＡＰＡＮ

■ 文字にふりがなをつける （※ＩＥで可）
特定の文字にふりがなをつける事ができます。
こちら競馬予想(けいばよそう)サイト

ソースは以下です。
表示させたい場所に貼り付ければ完了です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<font color="#004080" style="font-size:20px">こちら<ruby>競馬予想<rp>(<rt>けいばよそう<rp>)</ruby>サイト</font>

文字の色 color:#004080" の #004080
文字の大きさ font-size:20px の 20
ふりがな <rt>けいばよそう<rp>の けいばよそう


■ 背景画像をスクロールさせない （※ＩＥ、Ｓａｆａｒｉで可）
このページの背景画は、スクロールしても動きません。
ソースは下のようになります。
HTMLソースのBODYタグに貼り付けましょう。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
bgproperties="fixed"

例えばこのページの場合は、以下のようになっています。
<BODY background="mainbg.jpg" bgproperties="fixed">


■ 画像を使用せずにアイコン表示をする （※ＩＥで可）
トップページの表示が遅くなるのはなるべき避けたいところである。Webマスターの中には表示時間を考えて、出来るならGIFやJPGといった画像は使いたくないという方も多いのではないだろうか？　

ところで下記のアイコン。いわゆるGIFやJPGといった画像は一切使っていないと言ったらあなたはどう思いますか？　実はこれ、すべてテキスト（文字）だけで成り立つ簡易画像なのである。IE4以上をインストールしたコンピューターでは、これ以外にも様々な簡易画像が使用できるのです。ここでは、建物や地形を表すアイコンを挙げてみました。
ソースは以下のようになります。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）


B　　C　　D　　F



G　　H　　S



A　E　I　J　K　P　Q　R　T

ソース
<FONT color="#ff0000" face="webdings" size="+4">B</FONT>
<FONT color="#8000ff" face="webdings" size="+4">C</FONT>
<FONT color="#990000" face="webdings" size="+4">D</FONT>
<FONT color="#999999" face="webdings" size="+4">F</FONT>

face="webdings"がアイコンを表示させるためのソースです。
その他、精細は下記となります。あなたのお好みにあわせて変えてみてください。
※ 画像の一覧は"webdings"で検索すると掲載ページがみつかりますのでそちらをご参照下さい。

文字の色 color="#ff0000"の#ff0000
文字の大きさ size="+4"の+4
アイコンの種類 BのB

下記も、同じく画像は一切使用せずに顔のマークやマウスのアイコンを表示しているのですが、記載方法を少し変えてみました。

D　F　　8 　J　K　L　


M　N　4　2　1

ソース
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">D</SPAN>
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">F</SPAN>
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">8</SPAN>
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">J</SPAN>
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">K</SPAN>
<SPAN style="color : #0000ff; font-size:40pt; font-family:wingdings;">L</SPAN>

wingdingsが上記アイコンを表示させるために必要なフォントです。
<FONT>タグを使ってもこのアイコンは表示できますが、ＩＥでは、ウインドウズユーザーでないと正しく表示されない可能性があるということで、ソースを上記のようにスタイルシートで定義づけしました。こうすれば、ブラウザーの設定に左右されない掲載が可能です。
その他、精細は下記となります。あなたのお好みにあわせて変えてみてください。
※ 画像の一覧は"wingdings"で検索すると掲載ページがみつかりますのでそちらをご参照下さい。

文字の色 color : #0000ffの#0000ff
文字の大きさ font-size:40ptの40pt
アイコンの種類 DのD

■ 枠線のデザインをアレンジする
単調であった枠線のデザインもデザインを変えることによって見栄えがするものに変えられる。

くぼんでいます



２重線



浮き出ています



破線

ソースは以下です。
（必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください）

ソース
<DIV style="border-style:groove; width : 150px;">
くぼんでいます</DIV>

精細は下記となります。あなたのお好みにあわせて変えてみてください。
枠のデザイン border-style:groove の groove
ちなみに、「くぼみ」はgroove、「２重線」はdouble
「山線」はridge、「破線」はdashedとなります。
枠の幅 width : 150pxの150px

home about mail back