PC版こちら
携帯でこの文字が見える方はクリックしてください。画像とか見やすくなるかも
あにめはっく.jp
サイト
JavaScriptでページナビゲーション
※JavaScriptをオフにしている環境だと見られません。
実際に使用しているページはここらへん
なのですが
ITメディアとかそういうニュース系のサイトでは必ず見かけるこんなかんじのやつ
たぶんカテゴリを統一してみるとか、php化して記事分割するとかいう方法が考えられると思いますが、私の場合、
◎カテゴリをまたがった記事をシリーズ物として扱いたい。
◎1 2 3 ... の場合に、当該記事へのリンクは貼らず、他すべての同シリーズ記事へのリンクをはりたい。
◎記事一覧も表示したい。
◎シリーズ物は全何話になるか決まっておらず、後のページに追加していく。後のページがないうちは、「次の話」へのリンクははらない。
◎上記の記述を、既にupした記事の本文を書き直さず、urlを記述する場所を1カ所にして実現したい。
という相当わがままな仕様要求になった為、JavaScriptで組んでみました。
◆urlリストは .js ファイル内に用意し、本文記事中や目次のページにはスクリプト名・番号・フラグを書くことで目次リンク機能を呼び出します。
なお、lightbox系のスクリプトとは共存できないことを確認しています。他にもPrototype系のやつと一緒だとダメかもです。改造してくれたかたご報告いただけるとうれしいです。
目次を用意するスクリプト(.jsファイル)
以下のようなスクリプトをテキストで書き、.jsファイルとして保存します。タイトルに日本語を使っていると思いますので、文字コードは必ず表示したいサイトのhtmlと同じにしてください。
//ページのタイトルとURL Kiji_No = eval(Kiji_No); var A_ITEM = new Array(); var A_URL = new Array(); A_ITEM[0] = "1ページ目のタイトル"; A_URL[0] = "1.html"; A_ITEM[1] = "2ページ目のタイトル"; A_URL[1] = "2.html"; A_ITEM[2] = "3ページ目のタイトル"; A_URL[2] = "3.html"; //前へ次へ if(Kiji_top){ if(Kiji_No != 0){ prevno = Kiji_No - 1; document.write("
前へ
"); } document.write(" ∞ "); nextno = Kiji_No + 1; if(nextno != A_ITEM.length){ document.write("
次へ
\n"); } Kiji_top = false; } //その章の全ページへのページ番号リンク if(Kiji_pageno){ count = 0; document.write("
\n
"); for (var i in A_ITEM) { if(i == Kiji_No){ document.write("
"); }else{ document.write("
"); } count++; if(i == Kiji_No){ document.write(count + "
"); }else{ document.write(count + " "); } } document.write("
\n
\n"); Kiji_pageno = false; } //記事下の次へ if(Kiji_bottom){ nextno = Kiji_No + 1; if(nextno != A_ITEM.length){ document.write("
\n 次の記事
" + A_ITEM[nextno] + "
>>\n
\n"); } Kiji_bottom = false; } //その章の全ページへの記事リスト 話数入り if(Kiji_list){ count = 0; for (var i in A_ITEM) { count++; document.write("\t
" + count + ".「" + A_ITEM[i] + "」
"); } Kiji_list = false; }
A_ITEM[0] = ""; //ページのタイトル
A_URL[0] = ""; //ページのURL(フルパスで)
の""にはタイトルとurlを手動入力します。
[]の中の数字を+1しながら記事の数だけ入力してください。
目次を呼び出す部分(.html中に記述)
表示したい部分に以下のように記述します。
2行目
var Kiji_No = "2";
何番目の記事であるかを、0から指定します。.jsファイルのurlリストの[]内の数字と同じにしてください。list表示時には何番にしてもかまいません。
3行目
var Kiji_top = true;
タイトル部分の「前へ」「次へ」を表示する場合はtrue、表示しない場合はfalseを指定します。
4行目
var Kiji_pageno = true;
1 2 3 ...を表示する場合はtrue、表示しない場合はfalseを指定します。
5行目
var Kiji_bottom = true;
「次の記事へ (タイトル) >」を表示する場合はtrue、表示しない場合はfalseを指定します。
6行目
var Kiji_list = false;
記事リストを表示する場合はtrue、表示しない場合はfalseを指定します。
8行目
.js ファイルの位置を記述します。
目次ページなど、1つのページで複数のjsファイルを使うときには、jsファイルの名前を変えてください。
ナビゲーション部分のスタイルの変更は.js内で適宜
サンプルファイルのダウンロードはこちら
(.lzh、4.87kb)
gyokuei / 20080827-1312
前へ
サイト
次へ
サイト リストに戻る
あにめはっく.jp トップ
友達に教える
PC版銀の月動画計画
このサイトについて
玉英プロフィール
web拍手
サイト主にメール
占い
アニメ「霊珠」
S.T.7
(c)1995-2008, 玉英・ZARASU.com
銀の月動画計画
「萌えるアニメ」
作ってるあにめはっかー玉英の
作品と趣味のサイト