Jimdoにスライドショーを入れる
Jimdoにスライドショーを入れる方法をご紹介します。
今回は、jQuery Cycleを利用してスライドショーを入れてみます。
初心者でも簡単に出来るのでとてもおすすめです!
それでは、やってみましょう!
①jQuery Cycleのサイトを開きます。
クリック→jQuery Cycle
すると下記のページが開きます。
②画面の左上にあるDownload the Cycle Pluginをクリック。
すると下記のページが開きます。
③Cycle Lite Pluginを右クリックし、「名前を付けてリンク先を保存」を選び保存する。
※macは「別名でリンク先を保存...」かな?
ファイル名が、jquery.cycle.lite.jsです。
④Jimdoの管理画面に移動。画面右側の「設定」をクリック。「ヘッダー部分を編集」を押します。
⑤すると下記の画面が表示されます。
⑥下記のコードを書き込みます。
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> //<![CDATA[ google.load("jquery","1.6.2"); //]]> </script>
<script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { $(function() { ここに③で保存した「jquery.cycle.lite.js」のコードを貼り付けます。 }); })(jQuery); //]]> </script>
<script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { $(function() { $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); }); })(jQuery); //]]> </script>
※「jquery.cycle.lite.js」のコードを貼付けます。とは、
jquery.cycle.lite.jsをテキストエディタなどを使用しコードをコピーして
貼付けて下さい。
⑦Jimdoでスライドショーを貼付けたい所に、「+コンテンツを追加」をクリックして
「文章」→「追加オプション」→「HTMLを編集」をクリックし下記コードを書き込む。
<div class="slideshow">
<a href="#"><img src="image01.jpg" alt="" width="" height="" /></a>
<a href="#"><img src="image02.jpg" alt="" width="" height="" /></a>
<a href="#"><img src="image03.jpg" alt="" width="" height="" /></a>
<a href="#"><img src="image04.jpg" alt="" width="" height="" /></a>
<a href="#"><img src="image05.jpg" alt="" width="" height="" /></a>
</div>
⑧リンクとイメージを書き込む。
<a href="#">の#にリンク先を書き込む。
<img src="image01.jpg" alt="" width="" height="" />のimage01〜05.jpgに
表示させたい画像のURLを貼付ける。
次に、画像サイズ(単位はpix)を入力。
width="ヨコサイズを入力" height="タテサイズを入力"
※単位(pix)は不要。
aについてはコチラ
imgについてはコチラ
⑨画像ファイルは下記のリンクページで紹介している方法を使うと簡単に出来ます。
【みんビズ/Jimdoでたまに耳にする「画像置き場」って何のことでしょうか・・?】
最近やっと意味を理解した | 今村だけがよくわかるブログ
画像を数枚貼付けると思いますので、画像URLをテキストなどを利用してコピペして
使うと良いと思います。
ぜひやってみて下さい。
参考ページ
・【みんビズ Jimdoでもう少し柔軟なjQueryスライドショーを入れる】
jQuery Cycleを使ってシンプルなスライドを導入 | 今村だけがよくわかるブログ
・【みんビズ/Jimdoでたまに耳にする「画像置き場」って何のことでしょうか・・?】
最近やっと意味を理解した | 今村だけがよくわかるブログ
・JQuery Cycle Plugin