このブログは、JavaScriptでスタイルシート・フォントサイズ・横幅の選択ができるようになっています。
今まではJavaScriptを手書きしていました。
ですが、これは効率が悪いので、jQueryを使うことにしました。
jQueryはいくつかあるJavaScriptライブラリー（※1）の1つで、JavaScriptで作られた機能をまとめたものです。
このjQueryを使うには、ファイルをサーバーにアップロードし利用する方法と、ホスティングされている（※2）ものを読み込み利用する方法があります。
今まではJavaScriptを手書きしていました。
ですが、これは効率が悪いので、jQueryを使うことにしました。
jQueryはいくつかあるJavaScriptライブラリー（※1）の1つで、JavaScriptで作られた機能をまとめたものです。
このjQueryを使うには、ファイルをサーバーにアップロードし利用する方法と、ホスティングされている（※2）ものを読み込み利用する方法があります。
これを利用する前に、忍者ブログのことを考えます。
ブログ本体と、画像などのファイルがあるサーバーが違います。
同じ表示スピードではないかもしれません。
ブログ本体 http://xxxxx.blog.shinobi.jp/
ファイル http://file.xxxxx.blog.shinobi.jp/
結果は以下のとおりです。
《表示結果》
A：JavaScriptライブラリーのホスティングを利用する（今回はGoogle利用）
結果：×
理由：HTMLファイルの<head>〜</head>部分に記述し利用するが、この読み込みが全て終らないうちに<body>〜</body>の読み込みが終わり表示されてしまい、CSSが読み込まれない。
B：JavaScriptライブラリーをファイルアップロード用サーバーにアップロードして利用する
結果：△
理由：表示に時間はかかるが、CSS表示とJavaScriptが機能する。
そして、Bの方法で全てjQueryを利用し構築したところ…
最初の表示でCSSが読み込まれないことが判明。
そこで、レイアウト選択だけは別スクリプトにしました。
実際記述したソースコードなどは今度。
忍者ブログのテンプレートにjQueryをブチ込んでみた（5）
《参考》
※1
http://www.openspc2.org/JavaScript/Ajax/Library/
※2
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
ブログ本体と、画像などのファイルがあるサーバーが違います。
同じ表示スピードではないかもしれません。
ブログ本体 http://xxxxx.blog.shinobi.jp/
ファイル http://file.xxxxx.blog.shinobi.jp/
結果は以下のとおりです。
《表示結果》
A：JavaScriptライブラリーのホスティングを利用する（今回はGoogle利用）
結果：×
理由：HTMLファイルの<head>〜</head>部分に記述し利用するが、この読み込みが全て終らないうちに<body>〜</body>の読み込みが終わり表示されてしまい、CSSが読み込まれない。
B：JavaScriptライブラリーをファイルアップロード用サーバーにアップロードして利用する
結果：△
理由：表示に時間はかかるが、CSS表示とJavaScriptが機能する。
そして、Bの方法で全てjQueryを利用し構築したところ…
最初の表示でCSSが読み込まれないことが判明。
そこで、レイアウト選択だけは別スクリプトにしました。
実際記述したソースコードなどは今度。
忍者ブログのテンプレートにjQueryをブチ込んでみた（5）
《参考》
※1
http://www.openspc2.org/JavaScript/Ajax/Library/
※2
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
[1回]
PR
