みんビズ jimdoについてですが、やっぱり用意してあるテンプレートではなく、オリジナリティが欲しいと思ってきました。デザインにもこだわりたいですし。

というわけで、私は独自レイアウト一本でカスタマイズしようと思います。そこで、jqueryを使ってインタラクティブなサイトにしようと思います。

インタラクティブってなんだ！？って思われた方もいるでしょう。まあ、動きのあるかっこいいサイトに変わるとでも今はご理解いただいてもいいと思うんです。

というわけで、本題に入ります～。jqueryについては、以下のページなどでも触れました。

この2つのページで申し上げたことは、jimdoでjqueryを使う時には注意が必要と言うことでした。以上を踏まえた上で説明いたします。

追記：

もうちょっといろいろできるjQueryスライドの導入方法を以下のページに書きました。こちらもご参考ください。

１．jimdoの管理画面はインタラクティブですね

jimdoの管理画面は動きがあってわかりやすいですよね。特に管理画面のコントロールパネルや、保存完了の通知ポップアップ表示など。（赤枠で囲った箇所です）

jimdoの管理画面はインタラクティブ

ここでは、こういったインタラクティブな動作がjimdoの管理画面では既に使われているってことだけ覚えておいてください。

２．jimdoにjqueryのスライドショーを設置してみましょう

ではでは、jqueryのスライドショーをjimdoに設置してみます。下のサイトはスライドショーを設置するためのファイルがダウンロードできます。下のリンク先をクリックして、「easyslider1.7」をダウンロードしてください。

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

ファイルを解凍しておいてください。使うファイルは

• imageフォルダの画像全て
• jsフォルダの「easyslider1.7.js」

以上です。

MAC版とWindows版がありますので、ご使用の環境に合わせてください。

３．jimdoの「ヘッダー部分」にjqueryのコードを追加する

jimdoの管理画面で「設定」から「ヘッダー部分を編集」をクリックしてください。

ヘッダー部分を編集

コードを入れる画面に切り替わります。

コードを入れる

この画面の入力欄に下の内容を入力してください。

jqueryのコード

 /* googleのjqueryライブラリの「jsapi」を利用します */
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

 /* JQueryの使用を設定します */
 <script type="text/javascript">
 //<![CDATA[
 google.load("jquery","1.4");
 //]]>
 </script>

/* スライド表示のための設定 */
 <script type="text/javascript">
 //<![CDATA[
 jQuery.noConflict();
 (function($) {
 $(function() {
 ここの部分に「easySlider1.7.js」のコードをそのまま丸ごと追加する
 });
 })(jQuery);
 //]]>
 </script>

/* スライド表示のための設定 */
 <script type="text/javascript">
 //<![CDATA[
 jQuery.noConflict();
 (function($) {
 $(function() {
 $(document).ready(function(){  
 $("#slider").easySlider({
 auto: true,
 continuous: true,
 nextId: "slider1next",
 prevId: "slider1prev"
 });
 });  
 });
 })(jQuery);
 //]]>
 </script>

上のコード内で重要なところは「easyslider1.7.js」の内容をそのまま入力してください。easyslider1.7.jsをメモ帳などで開いてそれをコピー＆ペーストで問題ありません。

easyslider1.7.jsのファイルを指定の箇所に貼りつける

４．jimdoの「ウィジェット/HTML」に入力する

次はスライドを表示したいページへ移動して、「ウィジェット/HTML」のボックスを追加します。で、入力欄に下のコードを入力しましよう。

HTML

 <div id="slider" style="margin:0px; padding:0px;">
 <ul>
 <li class="slide01">
 <a href="https://www.imamura.biz/" target="_blank">WEBサイト</a>
 </li>
 <li class="slide02">
 <a href="https://www.imamura.biz/blog/" target="_blank">ブログ</a>
 </li>
 <li class="slide03">
 <a href="http://twitter.com/s56bouya" target="_blank">Twitter</a>
 </li>
 <li class="slide04">
 <a href="http://facebook.com/imamura.tetsuya" target="_blank">Facebook</a>
 </li>
 <li class="slide05">
 <a href="https://www.imamura.biz/blog/contact/" target="_blank">お問い合わせ</a>
 </li>
 </ul>
 </div>

５．jimdoの「独自レイアウト」の「ファイル」に画像をアップロードする

easysliderのフォルダにある画像をすべてjimdoにアップロードしましょう。

スライド用の画像をアップロードする

６．jimdoの「独自レイアウト」の「css」に入力する

ここまででは画像が表示されませんので、cssで画像を表示させましょう。なぜcssで画像を表示させるかについては、以下のページをご参考ください。

ご確認いただけた方は、作業に戻って下のコードを入力ください。

css

 #slider .slide01,#slider .slide02,#slider .slide03,#slider .slide04,#slider .slide05{
 text-indent:-9999px;
 }
 .slide01 a,.slide02 a,.slide03 a,.slide04 a,.slide05 a{
 display:block;
 height:240px;
 }
 .slide01 a{
 background:url(01.jpg);
 }
 .slide02 a{
 background:url(02.jpg);
 }
 .slide03 a{
 background:url(03.jpg);
 }
 .slide04 a{
 background:url(04.jpg);
 }
 .slide05 a{
 background:url(05.jpg);
 }

７．完成サンプルはサイトを見てください

設置してあるのを見たほうが早いですよね。私のjimdoのサイトで確認ください。「http://0225.jimdo.com」(ちょっといろいろ変更しているので見れないタイミングの時もあるかもしれません)スタイルシートで表示の微調整と、矢印の画像を若干変えています。近いうちに色々変更しようかな～、と思っています。

８．まとめ

jqueryのスライドを入れれば、サイトはたちまち動きのあるインタラクティブなサイトに変身しますね。しかし・・・難易度的には、ちょっと高いかもしれません。設置ができるまで、是非頑張ってみてください！！ちなみに、設置に失敗したら以下のページを見てください。

少し余談ですが、jimdoを一般的なかっこいいデザインのサイトまでに仕上げるためには

• HTML
• CSS
• javascript

といった理解はどうしても必要になります。ここから下は、とりあえず設置できた方に対して書いています。設置ができたら是非下も読んでください。

9．まとめ２（設置ができたら読んでいただけると幸いです）

jqueryの設置で１箇所だけ難しいところは、javascriptの記述についてです。

スクリプトの競合を回避するコードの書き方

 /* スライド表示のための設定 */
 <script type="text/javascript">
 //<![CDATA[
 jQuery.noConflict();
 (function($) {
 $(function() {
 ここの部分に「easySlider1.7.js」のコードをそのまま丸ごと追加する
 });
 })(jQuery);
 //]]>
 </script>

このコードの意味をさらっと説明しますと、要するにjimdoの管理画面をインタラクティブにするためのプログラム、「prototype.js」と「jquery」が、同時に動作ができるようにコードが書かれているんです。

なんでこういったことが必要か？それは、prototype.jsとjqueryは衝突してしまうからです。では、衝突とはなにか？単純に言うと、お互い干渉し合ってプログラムがどちらも動かなくなります。

つまり、jimdoの管理画面がうまく使えなくなる上にスライドも動かない。いいこと１つもないですね。

最悪jimdoにログインできなくなります。その場合は以下のページを参考にして下さい。

で、そういった動作の不具合が起こらないように回避するプログラムが上のようになります。この部分さえ理解してもらえたならば、今回はスライドのjqueryを紹介しましたが、他のjqueryのスクリプトを設置することが出来ます。

いかがでしょうか。jimdoでjqueryを使うには注意が必要な理由がこれで少しはご理解いただけたかと思います。jqueryの設置の手助けになれば幸いです。

jimdoを使ってホームページを作りたい方は、登録はこちらでできます。