もすけのアラド戦記: このサイト内の JavaScript利用説明

このサイト内の JavaScript利用説明

このサイト「もすけのアラド戦記」では、主に jQueryを主体とした JavaScriptを用いた機能を利用しています。もちろん JavaScript/ブラウザのプラグインを無効にした状態でも参照に支障の無いデザインを心がけておりますが(実は、私はブラウザ上で動作する JavaScriptはあまり好きじゃない)、JavaScriptを有効にしていただけると、以下の機能が実行されます。

拡大画像リンクをクリックした場合に、リンク先を開きません。

サイト内のサムネイル画像をクリックしていただくと、拡大画像を開く箇所があります。この部分を jQueryのThickBoxプラグインを利用して、ページ移動をしないで、そのページ内で拡大画像を表示するようになっています。

ThickBoxウインドウは、CSSを利用して表示されており、ブラウザの「新しいウインドウで開く」とは動作が異なります。ThickBoxを閉じる時は、ThickBox外のブラックアウトされた部分をクリックするか、ThickBox内の[close]リンクをクリックする。もしくは[ESC]キーを押してください。

thickbox例

上のサムネイル画像をクリックしてください。

投票に参加できます

もすけのアラド戦記アンケートに参加できます。

この機能は@nifty投票を利用しています。JavaScriptとAdobe Flashプラグインで実装されています。

ページ毎に目次が表示されます

ページ内のインデックス(<H3>or<H4>のヘッダ)に対応した目次を表示します。

さらに目次内リンクにマウスのポインタを乗せた時に、リンク先記事の概要を表示します。この機能は jQueryのclueTipプラグインを利用しています。

記事毎の末尾に「ページ目次へ戻る」リンクが表示されます。

Google Custom Search Engineの検索結果をサイト内に表示します

「もすけのアラド戦記」では、検索機能にGoogle Custom Search Engineを利用しています。JavaScriptを有効にした状態で検索を行うと、検索結果がサイト内のページに表示されます。

JavaScript無効状態の検索結果画面

JavaScript有効状態の検索結果画面

サイト外部リンクへ外部リンクアイコンを表示します

記事内のサイト外部に対するリンクに対し、外部リンクアイコンを表示します。

上記スクリーンショットの通り、「公式サイト」のリンク先である「http://arad.hangame.co.jp/」は、このサイト「http://arado.cocolog-nifty.com/」外のリンクであるため、リンクの右側に外部リンクアイコンを表示しています。

解析機能が有効になります

JavaScriptとCookieを有効にしていただけると、cocolog解析と、GoogleAnalyticsによるアクセス解析に、訪問者様のアクセス履歴が保存され、そのデータをサイト作成に対して役立たせていただけます。

アラド戦記パズルで遊べます

アラド戦記パズルゲーム「セリアを救出せよ」をプレイできます。

このパズルも jQueryのプラグインjqPuzzleを利用させていただきました。

正常に動作しない場合

これらの機能が正常に動作しなかった場合は、この記事のコメント欄より連絡をいただければありがたく思います。

対応を行う予定のブラウザは下記の通りとなっております。

InternetExplorer6以上
Fifrefox3以上
Opera 9.5以上
Safari

このサイト内の jQueryファイルは、Googleから読み込んでいます

2008年 10月 24日。安全性の証明と、訪問者様のパソコンへの負荷の低減、インターネット上のトラフィックの低減を考えて、このサイトの jQueryは、http://arado.cocolog-nifty.com/blog/files/jquery-latest.pack.jsから、google.comのファイルを読み込む様に変更しました。

http://code.google.com/apis/ajaxlibs/

以上、このブログで利用中の JavaScript/プラグインの説明を終わります。ココログフリーの標準機能に対し、私が追加した JavaScriptコードに関しては、HTML内<H2>ブログのテスト</h2>ブロック内に全て記述しておりますので、気になる方はコードを確認してください。問題や、よりよいコードの連絡をいただくのも歓迎します。