« 2014年12月 | トップページ | 2015年6月 »

2015年2月の記事

2015年2月 8日 (日)

Jimdoで画像スライドショーをスマートフォン対応にする方法 (jQuery Cycle 後継の Cylcle2を使う)

これまでJimdoでスライドショーを入れるとき、たとえば以下のサイトに記載された方法が利用できます。

【みんビズ Jimdoでもう少し柔軟なjQueryスライドショーを入れる】jQuery Cycleを使ってシンプルなスライドを導入 今村だけがよくわかるブログ
http://www.imamura.biz/blog/cms/jimdo/3922

Webデザイナーへの道しるべ | suge1040's diary
Jimdoにスライドショーを入れる

http://suge1040.hatenablog.com/entry/2014/12/22/011243

#こんな場所でこんな記事を書くのもどうかと思いますが(^^;

ただし、この方法では、スライドショーに使う画像のサイズが大きいとき、スマートフォン表示を行ったときに横にはみ出てしまいます。そのため、横方向にもスクロールしてしまい参照しづらくなります。

jQuery Cycle の後継である Cycle2 (http://jquery.malsup.com/cycle2/) がレスポンシブ対応可能なので、これを利用してみます。

【1】ファイルのダウンロード

Cycle2 のページ内の Download をクリックします。
表示される Downloadページから、「Download Cycle2 Production Version」というボタンをクリックします。

Download_3

これで、jquery.cycle2.min.jsがダウンロードできます。

【2】googleのjsapiを使うためのコードを書く

Jimdoの管理画面右側の「設定」をクリックします。

Settei_3


「ヘッダー部分を編集」をクリックします。

Header_2


「ヘッダー部分の編集」ウィンドウが開きますので、以下のコードを書き込みます。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
//<![CDATA[
    google.load("jquery","1.7");
//]]>
</script>

Cycle2ではjQueryのバージョン1.7以降が必要なのでそのバージョンのところが変わっています。

Headeredit_2

【3】先ほどのダウンロードしたファイルを使う

引き続き、以下のコードを書きこみます。

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
  $(function() {
ここに先ほどダウンロードしたjquery.cycle2.min.jsの内容をそのまま貼り付けます
  });
})(jQuery);
//]]>
</script>

【4】最後に、Cycle2を動かすための記述を追加

<style>
@media screen and (max-width: 870px) {
.cycle-slideshow { width: 100% }
.cycle-slideshow img { width: 100%; height: auto }
}
</style>

Cycle2を制御する方法は JavascriptではなくCSSになっています。

@media screen and (max-width: 870px) {
の行の 870px のところは、スライドショー画像の横サイズを指定します。
この部分で、スクリーンサイズが画像より小さい場合に、右にはみ出ないようにする(=100%表示)設定を行っています。

「ヘッダー部分を編集」への記入はここまでです。

【5】コンテンツの追加

Jimdoの「ウィジェット/HTML」ボックスを(以前は「文章」ボックスでもできていたのかもしれませんが)を追加して、以下のようにコードを書きます。

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    >
    <img src="
http://malsup.github.io/images/p1.jpg">
    <img src="
http://malsup.github.io/images/p2.jpg">
    <img src="
http://malsup.github.io/images/p3.jpg">
    <img src="
http://malsup.github.io/images/p4.jpg">
</div>

divで指定するクラス名が cycle-slideshow に変わり、動作指定(水平スクロール、など)もこの中で指定することになります。

最後に、「保存」ボタンをクリックします。

Cycleslideshow_2


さぁてどうでしょう?うまくいったでしょうか?

| | コメント (2) | トラックバック (0)

« 2014年12月 | トップページ | 2015年6月 »