無料ホームページサービス Jimdo で jQuery を使う

LINEで送る
Pocket

Jimdo というホームページ作成支援サービスがあります。
Jimdoのページ
メールアドレスを登録すれば無料でホームページを作成・公開し、保存しておけるサービスです。
デザインのテンプレートが多数用意されていて、はじめての人にも簡単にホームページが作成できます。

ただ、簡単な分融通の利かない部分もあります。その一つがjQueryの組み込みでしょう。
今回は、Jimdo での jQuery の使い方をご説明します。

Jimdo での jQuery の置き場所

Jimdo で jQuery を使うのに手っ取り早い方法は、ヘッダー部分を編集することでしょう。

「編集」画面にログイン → 「設定」 → 「ヘッダー部分を編集」を
screenshot-r
クリックすると。。。

screenshot2-r

「ヘッダー部分を編集」の説明にあるように、この中で <head> タグの内容を編集できます。

準備

Jimdo はJavaScriptライブラリ prototype.js で動作しているそうです。
そこに jQuery のライブラリを読み込むと衝突(コンフリクト)が発生し、うまく動かなくなってしまいます。

それを避けるために、次のようなコードを「ヘッダー部分を編集」の部分に書き込みます。

google.load の使い方

6行目の “jquery” 部分はモジュール名、”1″ 部分はバージョンを指定します。
詳しくはGoogle Loader Developer’s Guide でご確認ください。
この記事投稿時の最新バージョンは 1.4.2 でしたが、常に最新の安定版を読み込みたい場合はバージョンのみを指定し、上の例のようにリビジョンを省略すればOKです。

そしてその後に追加したいプログラムを書き込みます。

ではさっそく jQuery プログラムを Jimdo に組み込んでみましょう。

jQuery プログラムの組み込み

たとえば

このようなコードを組み込むとすれば、「ヘッダー部分を編集」の部分に次のように記述します。

組み込みたいコード(上の1~3行部分)を下の6~8行部分に挿入すればOKです。

次のようになりました。
screenshot3ーr

無料 Jimdo 特有の制約

Jimdo の無料サービスにはさまざまなテンプレートや便利機能が付いていますが、反面何かと不便に感じる点もあります。

  • FTP が使えない。
  • フッターの編集内容がコピーライト表記程度に限られる。
  • レスポンシブデザインに非対応
    スマホ表示との切り替えは可能。

など。
うまく利用してよいページを作りましょう。

LINEで送る
Pocket