オープニングページのテンプレートに関する説明

オープニングページのテンプレート
  ↑
このリンクを右クリックして、「対象を保存」「リンク先を保存」などのオプションを選択し、テンプレートファイルを任意のファイル名(拡張子「.htm」)で保存します。

では、ソースの各部分の説明に移ります。
任意に書き換えられる部分のみ紹介します。それ以外の部分は基本的には書き換えません。もちろん、技術的な知識が十分にあり、書き換えが諸機能に影響しないと確信できる場合はその限りではありません。
以下のコード例で、赤字の部分は書き換えられる部分です。


<meta name="description" content="並列型リドルのオープニングページのテンプレート">

この1行はなくてもかまいませんが、これを入れておくと content で設定した文字列(上の赤文字の部分)がGoogleの検索結果画面とかFacebookのリンクシェアなどに表示されます。
もちろん、これを入れておくのはオープニングページだけで、それ以外のページには入れません。


<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="p00.css">

CSSファイルを相対パスで指定します。
複数使う場合は、下に追加していきます(上の例ではp00.css)。
1つしか使わない場合はもちろん最初の1行だけにします。


<script type="text/javascript"><!--

	var pageNum = '0';
	var ansDir = '';

--></script>

pageNumは問題番号に相当します。初期設定値の0をそのまま使うのが一番よいと思います。
[Go] をクリックしたときの移動先ページは「_<パスナンバーの合計値>.htm」となります。
たとえばpageNumが0で、パスナンバーの合計値が99999の場合、[Go] をクリックしたときの移動先は「0_99999.htm」です。
pageNumは任意の数字に変更できますが、問題番号として使われている数字とは重ならないようにしてください。

ansDirは、移動先ページがあるディレクトリの相対パスです。
初期状態では引用符の間に何も文字がありませんが、これは同じディレクトリであることを表します。
もし別のディレクトリを使う場合は、必要に応じて書き換えてください('p10/' とか)。

なお、[Go] ボタンをクリックした後の移動先ページのテンプレートは用意していません。
移動先ページの用途に応じて、問題ページまたは正解ページのテンプレートを流用してください。


<script src="template.js"></script>

実際に使うJavaScriptファイルの名前をここで指定します。
複数ある場合は下に追加していきます。


<title>リドルのオープニングページのテンプレート</title>

ブラウザーのタブや、ウィンドウのタイトルバーに表示されるタイトル。
オープニングページの場合は、リドルのタイトルを入れるとよいでしょう。


<h1 id="pTitle">
リドルのタイトルが入るよ
</h1>

リドルのタイトル(「ナオのリドル10題 Vol.XX」など)を入れます。


<!-- ここから説明文などをを入力 -->

(この間)

<!-- ここまで説明文など -->

ここには説明文などを任意に入力します。


	<tr>
		<td><a href="page01.htm">問題1</a></td>
		<td>1つ目の問題ページ</td>
		<td id="pn1" class="passNo"></td>
	</tr>

問題ページ一覧表の行です。
最初の td には、問題番号(ここでは「問題1」)を入力します。 a href では問題ページの相対パスを指定します。
2番目の td には、問題ページのタイトルを入力します。
3番目の td はパスナンバーが表示される欄です。id の数字の部分は問題番号です(3問目なら「pn3」となります)。
このテンプレートでは1問分しか用意されていませんが、問題数に応じて tr 全体(<tr> ~ </tr>)をコピー&ペーストして、適宜追加・改変してください。

なお、パソコン上では基本的にパスナンバーは表示されません。
ただし、Internet Explorer の場合はパソコン上でも表示されるようです。


オープニングに戻る


 ©2013 Gran-Fénix.com --- Produced by Nao Fénix