ファンブログでjQueryを使うには次の３つの方法があります。

1. CDNを利用する
2. ファンブログのjQueryを使用する
3. jQueryをアップロードして使用する

この記事では、３つ目の「jQueryをアップロードして使用する」についてメインに説明を行っています。

CDNを利用する

CDN（Contents Delivery Network） は、大容量のウェブコンテンツを高速に配信するための仕組みの事です。

ブログ運営者にとってCDNには以下のような利点があります。

• ファイルをアップロードする必要がない
• 数多くのライブラリやプラグイン、フレームワークなどを利用できる
• 表示が高速になる

使用する ファイルはCDNから取得する のでサーバーにアップロードする必要がなく、管理の手間が省けますし、有名な jsDelivr というCDNを利用すれば、様々なライブラリが利用できます。

高速化に関しては、CDNを利用するサイトでは、読み込むファイルのURLが同じものになるので、他のサイトで一度読み込まれるとブラウザにキャッシュされ、それ以降同じURLであれば そのキャッシュが利用されて表示が高速 になります。

ファンブログのjQueryを使用する

ファンブログでは、ファイルをアップロードしなくても、下記URLでjQueryのバージョン「 1.10.2.min.js 」が使用できるようです。

https://fanblogs.jp/js/jquery-1.10.2.min.js

jQueryをアップロードして使用する

ファンブログではjQueryをサーバーにアップロードして使用することができます。

この記事では、 jQueryのファイルをアップロードして使用する場合の手順 を説明しています。

jQueryだけでなく、自前のJavaScriptファイルを外部ファイルとして読み込むようなときにも役に立つと思います。

まず、 jQueryの公式サイト にアクセスしてjQueryをダウンロードします。

トップページの「Download jQuery」をクリックします。

「 Download the compressed, production jQuery 3.3.1 」のリンクを右クリックしてコンテキストメニューを表示させて、そこからファイルを保存します。

ブラウザによっては、普通に左クリックすると新しいタブにファイル内容が表示されるだけで保存されないことがあります。

「3.3.1」の部分はそのときの最新バージョンになります。

一般的に、表示速度を向上させるために空白やコメントなどを取り除いて、圧縮軽量化されたファイルを使用するので「 compressed 」の表記があるものを使用します。

jQueryをダウンロードしたら、次はファンブログの管理画面でファイルをアップロードします。

アップロードする場所は、「画像管理」というページです。画像とありますが、 CSSやJSなどの画像以外のファイルもアップロードできる ようです。

管理画面の「画像管理」ボタンをクリックします。

「DROP」アイコンが表示されている大きなグレーの領域をクリックすると、ファイルを選択するためのウィンドウが表示されます。

jQueryファイルを選択して決定するとファイルがアップロードされます。

アップロード領域にファイルをドラッグ＆ドロップ して、直接アップロードすることもできます。

アップロードが完了すると、そのページの「ファイル一覧」という所にアップロードしたjQueryファイルが表示されます。

ファイル一覧の各項目の右の方に「HTML」というテキストがありますが、これをクリックすると、そのファイルへのリンクのソースが表示されるので、ここでその ファイルのURLを確認 することができます。

このURLは後で使用するので「アップロードしたファイルのURL」の確認の仕方を覚えておくと便利です。

最後に、アップロードしたjQueryファイルをブログで読み込むように、ブログで使用しているテンプレートのHTMLを編集します。

管理画面の「デザイン」ボタンをクリックします。

次に「HMTLの編集」タブをクリックします。

現在使用しているHTMLの項目にある「編集」というリンクをクリックしてHTMLの編集画面を開きます。

「デフォルトＨＴＭＬ」は編集できない ので、jQueryを使用するには新しいHTMLを作成してください。

表示されているHTMLソースにアップロード済みのjQueryファイルを読み込ませるコードを追加します。

下記のコードのように「script」タグでjQueryファイルを読み込みます。 URLは適切なものに書き換え てください。

<script src="<% blog.page_url %>file/undefined/jquery-3.3.1.min.js"></script>

「 <% blog.page_url %> 」は独自タグと呼ばれるものです。ここに記述されている独自タグはブログのURLを表しています。当方のブログでは「https://fanblogs.jp/uplift/」の文字列に置き換えられます。

最後に「保存」ボタンをクリックして編集内容を保存すればブログでjQueryが使用できるようになります。