- tips, サイト製作
- 2008/03/08
- コメント (0)
- Trackback (0)
前回はPHPを使ってCDPのメニューを管理する方法でしたけれども、今回はJavaScript編です。JavaScriptなら無料サーバーでも大体使えるでしょうから、PHPがだめな方用に。しかしPHPが使えるならPHP編の方がオススメです。
管理人はJavaScriptについて、素人に毛が生えたくらいの知識しかありません。それでもこの記事を書いているのは多くのCDP利用者がサイト管理を楽にできるようになってほしいことと、CDPの利用者が増えてほしいからです。間違えは遠慮なくご指摘ください。説明が意味不明ならコメントください。多くの方が使えるように改善していきます。
メニューを分離する。
万が一のために、手を加えるファイルはバックアップを取ってから作業してください。
まず、CDPファイル（もしくは自分のサイト）のメニューだけを切り取り、メモ帳などのテキストエディタに貼り付けます。PHP編では#MENUにあるすべてをコピペしましたが、今回はリストのｌｉの部分だけにします。
<li id="MENU01"><a href="index.html">index</a></li>
<li id="MENU02"><a href="sample1.html">sample1</a></li>
<li id="MENU03"><a href="sample2.html">sample2</a></li>
<li id="MENU04"><a href="sample3.html">sample3</a></li>
この部分だけです。次にJavaScriptの文法にこれを書き換えていきます。変更点は以下の通り。
document.write('<ul>');
document.write('<li id="MENU01"><a href="index.html">index<¥/a><¥/li>');
document.write('<li id="MENU02"><a href="sample1.html">sample1<¥/a><¥/li>');
document.write('<li id="MENU03"><a href="sample2.html">sample2<¥/a><¥/li>');
document.write('<li id="MENU04"><a href="sample3.html">sample3<¥/a><¥/li>');
document.write('<¥/ul>');
一文一文の先頭にdocument.write('、文末に');を入れています。注意として、document.write('と');の間にある/（スラッシュ）の前には¥を置いて、またこの中ではシングルフォークティション（’のこと。ちなみにリンクなどを囲っている”はダブルフォークティション）が使えません。このふたつに気をつければ顔文字とか変な文字を書いていない普通のメニューならばエラー無く表示されると思います。
そうしたらこのファイルを「menu.js」という名前で保存します。あまり目にしない拡張子ので間違えないで下さいね。htmlファイルと同じフォルダの中に保存しておきましょう。
HTMLへの記述、およびJavaScriptを無効にされている方への配慮
ではJavaScriptを使うhtmlファイルの<head>と</head>の間に以下の文を追加してください。JavaScript使うよー、と宣言してるようなものです。
<meta http-equiv="content-script-type" content="text/javascript">
次にhtmlファイルのメニューを切り取って空白になった部分に、以下の色つきの分を追加します。
<div id="MENU">
<h2>menu</h2>
<ul>
<script src="sample.js" type="text/javascript"></script>
</ul>
</div>
<hr>
menu.jsにあるメニューがこの部分に表示されます。
これで終わってもいいのですが、このままではJavaScriptをオフにしている方や携帯電話などでいらした方にはメニューが表示されません。なので、JavaScriptが動かない場合どんな表示をするかも指定しておきます。
<div id="MENU">
<h2>menu</h2>
<ul>
<script src="sample.js" type="text/javascript"></script>
<noscript>
<li><a href="sitemap.html" ID="MENUSITEMAP">メニューが表示されない場合はこちらからどうぞ。</a></li>
</noscript>
</ul>
</div>
<hr>
そして手間はかかりますが上で指定したsitemap.htmlにメニュー一覧とか、サイトマップを作っていただくことになります。
sitemap.htmlができたら、手を加えた●●●.html、menu.js、sitemap.htmlをサーバーにアップしてください。そして●●●.htmlにアクセスして、メニューが表示されるかどうか確認してください。
JavaScript編はこれにて終了です。お疲れ様でした。
Popularity: 91% [?]
