あなたのウェブページにスプラッシュページを設置したいとお考えですか？スプラッシュページはあなたのウェブサイトをブランディングする素晴らしい方法です。このHow-Toは、あなたがHTMLとCSSをかなり知っていることを前提としています。
1
アウトラインページを作成します。外部のCSS（カスケーディング・スタイル・シート）を使うこともできますが、この例では内部のスタイル・シートを使います。ですから、まず基本的なタグから始める必要があります：
<html>
<head>
<タイトル>ようこそ！</タイトル
<style type="text/CSS">
</style> <script type="text/javascript
<script type="text/javascript"> <script type="text/javascript"> </script
</script
</head>
<body>
</body>
</html
<html>
<head>
<タイトル>ようこそ！</タイトル
<style type="text/CSS">
</style> <script type="text/javascript
<script type="text/javascript"> <script type="text/javascript"> </script
</script
</head>
<body>
</body>
</html
2
<head>セクションにCSSとタイトルの情報を記入します。必要に応じて値を変更する必要があります：
<html>
<html> <head
<タイトル>ようこそ！</タイトル
<style type="text/CSS"> 以下のように記述します。
body {background-color：背景色: #DCDCDC｝
</style>
省略...
注：フォント用のCSSプロパティを追加するとよいでしょう。
<html>
<html> <head
<タイトル>ようこそ！</タイトル
<style type="text/CSS"> 以下のように記述します。
body {background-color：背景色: #DCDCDC｝
</style>
省略...
注：フォント用のCSSプロパティを追加するとよいでしょう。
3
ホームページに移動するスクリプトを追加します。このセクションはオプションで、自動的に移動させたくない場合は省略できます。
省略...
<script type="text/javascript"> 以下のように記述します。
window.onload=timeout；
関数 timeout(){
window.setTimeout("redirect()",5000)}を実行します。
function redirect(){
window.location="ホーム.htm"
return}
</script>
省略...
<body onload="timeout()">とする。
省略...
注意事項5000は5秒を意味します。これより短くしたり長くしたりする場合は変更してください。リダイレクトファイルの名前をホームページの名前に変更してください。
省略...
<script type="text/javascript"> 以下のように記述します。
window.onload=timeout；
関数 timeout(){
window.setTimeout("redirect()",5000)}を実行します。
function redirect(){
window.location="ホーム.htm"
return}
</script>
省略...
<body onload="timeout()">とする。
省略...
注意事項5000は5秒を意味します。これより短くしたり長くしたりする場合は変更してください。リダイレクトファイルの名前をホームページの名前に変更してください。
4
タイトルを追加します。検索エンジンが見つけやすいように、<h1></h1>タグで囲みます。
5
画像を追加します。これは、あなたのサイトの内容を示すものでなければなりません。この場合も<img>タグを使います。
省略...
<body>
<img src="splashimage.jpg">のようにします。
</body> <img src="splashimage.jpg"> </img
</html
注意このステップでは、タイトル画像を.htmファイルと同じフォルダに保存し、そのファイル名を "splashimage.jpg "とすることを前提としています。画像を画面の中央など、他の場所に配置したい場合は、CSSポジショニングを追加することができます。
省略...
<body>
<img src="splashimage.jpg">のようにします。
</body> <img src="splashimage.jpg"> </img
</html
注意このステップでは、タイトル画像を.htmファイルと同じフォルダに保存し、そのファイル名を "splashimage.jpg "とすることを前提としています。画像を画面の中央など、他の場所に配置したい場合は、CSSポジショニングを追加することができます。
6
ボタンを追加します。このボタンは、訪問者がホームページへ素早くアクセスできるようにするためのものです。クリックすると、すぐにホームページに移動します。代わりに、単にホームページへのリンクを提供することもできます。
省略...
<img src="Sample.gif">をクリックしてください。
<br>
<form>
<input type="button" value="ホームページ" onClick="redirect()">
</form
</body>
</html
注: "value "要素を変更することで、ボタンに表示されるテキストを変更することができます。
省略...
<img src="Sample.gif">をクリックしてください。
<br>
<form>
<input type="button" value="ホームページ" onClick="redirect()">
</form
</body>
</html
注: "value "要素を変更することで、ボタンに表示されるテキストを変更することができます。
7
テキストを追加します。これは何でもかまいません。一般的には "Thank You For Visiting "のような挨拶文か、"Created By... "のようなものです。
省略...
</form>
<p>ご訪問ありがとうございます。
</body>
</html
注意事項ここでは、テキストにCSSを使うことができます。お望みであれば、代わりに見出し ( <h1> ) を使うこともできます。
省略...
</form>
<p>ご訪問ありがとうございます。
</body>
</html
注意事項ここでは、テキストにCSSを使うことができます。お望みであれば、代わりに見出し ( <h1> ) を使うこともできます。
8
これでスプラッシュページができました！あとはCSSを使ってきれいにし、公開するだけです！
コメント
最新を表示する
NG表示方式
NGID一覧