連番タイトル名を基準にリンク先を変更する方法

締切済

質問者：keybordman
質問日時：2013/06/08 17:45
回答数：4件

500ページの連番のhtmlがあります、そして各ページ<title>部分をNumber001からNumber500とし、各ページ内にタイトル名をそのまま表示する部分、キイボードの矢印キーでページ移動する部分、ページ内のリンクでページ移動する部分を例えば10ページの場合、以下の様に記述しています。（一応動作は確認しましたが効果を得るにあたりタイトル要素をこのように使っていいのか、他の記述が一般的なのか理解できていない初心者です、主にコピペで作製、期待どおりの効果が得られればそれでよしとしている程度の者です）

<!DOCTYPE HTML>
<html>
<head>
<title>Number010</title>
<script type="text/javascript">
function checkCSRKey()
{
if (event.keyCode == 37) location.href = "Number009.html";
if (event.keyCode == 39) location.href = "Number011.html";
}
window.document.onkeydown = checkCSRKey;
</script>
</head>
<body>
<div>
<script>document.write(document.title);</script>
</div>
<ul >
<li><a href="Number009.html"> 前へ</a></li>
<li><a href="Number011.html">次へ</a></li>
</ul>
</div>
</body>
</html>

作製するhtmlの増減、挿入にあたり、その都度、タイトル名、リンク先の変更をしなければならないのですがタイトル名を変更したら、その変更したタイトル名を基準にリンク先を自動的に変えてくれる記述を教えていただきたいのです。尚、リンク先ページはタイトル名連番の前後しか指定しません。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2013/06/09 09:40

＞こういう手法自体が一般的に、ご法度なのでしょうか？

　どの部分か分かりませんが・・

　例えば新聞社の膨大な記事や、数ページに分かれた記事はjavascriptやスタイルシートを無効にしても利用できますね。

　その500ページがどういう内容なのかがわかりませんので方策は示せませんが、すくなくともjavascriptではまずいでしょう。それをするくらいなら、500ページ書き換えたほうが良いです。titleは検索結果に現れますから、それもページの内容を的確に示すものであるべきです。

- 0
- 件

通報する

この回答へのお礼

アドバイス、ありがとうございます。
CSSやスクリプト以前に適切なマークアップというものすら理解できていない者ですので参考になりました。

通報する

お礼日時：2013/06/10 11:38

No.3

回答者： Ogre7077
回答日時：2013/06/09 08:35

HTML ページ内の重要な部分は、動的要素ではなく静的要素とすべきでしょう。

なのでスクリプト以外の方式で解決することをオススメします。
サーバー側処理ならJSPなりASPなりPHPなりで出力
静的ファイルなら、perl なり ruby なりで一括置換

動的要素とした場合は、以下の問題が発生します。
・自動巡回する検索エンジンが、重要なキーワードを拾えない
・視覚障害者が使う読み上げソフトが、読み上げ対象として認識できない
・スクリプト実行が抑制される環境では、このページをまともに読めない

もう一つ、必要とあらば致し方ないですが...

左右キーボードによる前後の遷移ですが、ブラウザのキー割り当てと競合する可能性がありますので、
使わない方式を検討なされてはいかがでしょうか。
たとえば旧来型の携帯電話のような環境だと、矢印キーが別用途に使われるのは致命的です。

ちなみに以下の様に書いてくれると、ブラウザによってはほぼ同等の操作ができる可能性があります。

<head>
<link rel="prev" href="Number009.htm">
<link rel="next" href="Number011.htm">
</head>

- 0
- 件

通報する

この回答へのお礼

アドバイス、ありがとうございます
左右矢印の動作割り当ても気になってましたので。
行き当たりばったりではなく、書けるように努力したいと思います。

通報する

お礼日時：2013/06/10 11:38

No.2

回答者： ORUKA1951
回答日時：2013/06/08 21:16

徹底的な欠点として、検索エンジンやjavascriptによるページ書き換えを禁止している人には使えない。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキストブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスターツールヘルプ( http://support.google.com/webmasters/bin/answer. … )］より

　500ページもあれば、動的に作成するほうがはるかに楽です。

- 0
- 件

通報する

この回答へのお礼

アドバイス、ありがとうございます。
むずかしいことはわかりませんが、こういう手法自体が一般的に、ご法度なのでしょうか？（例えば、やればできるが検索エンジンに対する<title>タグ要素の役割的なもの考えた場合に、普通は使わない、とか）あと、結論をいただいておりますが、動的に作成、というのは質問内容でいうところの自動で変えたい部分は直接書いたほうがいいということでしょうか？また、アドバイスいただければ幸いです。

通報する

お礼日時：2013/06/08 22:14

No.1

回答者： askaaska
回答日時：2013/06/08 18:20

変数として prePage と nxtPage を宣言

window.onloadで
document.titleのNumberXXXからsubstringでXXXを取得 -> curNum
XXXをparseIntして -1 と +1 してと結合
prePage = "Number" + (curNum - 1) + ".html"
nxtPage = "Number" + (curNum + 1) + ".html"

<a href="NumberUUU.html">を<a href="#" onclick="go(-1)">
<a href="NumberWWW.html">を<a href="#" onclick="go(1)">

function go(num)で
num = -1ならprePageに遷移
num = 1ならnxtPageに遷移

キーイベントも同じ

て感じにしてみるとかどお？