トップページイラスト（ナナセミキ様作成）

イラストの情報はこちらから≫

menuopen

2012/01/21

Jimdo・みんビズカスタマイズ JimdoにコンテンツスライダーJQuery「FlexSlider」をJimdoと干渉させずに設置

「FlexSlider」をJimdoに設置

軽量で機能も豊富な「コンテンツスライダー」の「FlexSlider」をJimdoに設置してみました。

更新情報

2014年9月2日
8月13日よりスタートした「Jimdo新UI」環境下での動作ですが、これまで通りの設定で動作を確認しております。
動作しない場合がございましたら、ご連絡頂ければ幸いです。
また、レイアウトとテキストを小修正しました。

2014年2月25日
現時点の「FlexSlider（ver2.2）」では、ディレクションナビ（画像の左右に表示されるボタン）の仕様が変更になり、下記の方法ではナビのボタンが表示されません。
本解説に準拠したバージョンが下記からダウンロードできますので、ご活用ください

【FlexSlider旧バージョンダウンロードサイト】
https://github.com/woothemes/FlexSlider/downloads

上記ページから「FlexSlider-2.0.zip」をダウンロードしてご利用ください。
（上記バージョンでは、ナビゲーションボタンも画像データで設定してあります）

2012年7月8日
「FlexSlider」がバージョンアップ（ver2.0）したため、最新版に準じた内容に修正しました。
尚、公式サイトでは「IE7以降」で動作と書いてありますが、IE6でも動作確認致しました（ナビゲーションボタンがずれて表示されましたが操作は出来ました）。
2013年７月現在、完全な動作はGoogle Chrome、Safari、FireFoxにて確認しています。

  • 画像1

    キャプションを付ける事ができます

  • 画像2

    オプションで画像表示アニメーションを変更できます

JimdoでjQueryを干渉させずに動かしてみたの手法を用いて、軽量で機能も豊富な「コンテンツスライダー」の「FlexSlider」をJimdoに設置してみました。
複数の情報をちょっとリッチに見せたい時に役立ちそうですね。

設置方法（独自レイアウトへの設置方法です）

使用JQuery

使用したjQueryはこちらから
http://flex.madebymufffin.com/

紹介・解説サイトはこちらから
http://www.skuare.net/2011/08/javascriptflexslider.html

1：jQueryファイルをアップ

jQuery.jsと、ダウンロード・解凍した上記jQueryファイルの中から「jquery.flexslider-min」を「レイアウト」⇒「独自レイアウト」⇒「ファイル」にアップします。

2：HTMLまたはヘッダ管理画面にコードを追加

アップしたjQueryを読み込むため、右記コードを記載します。
「設定」メニューのヘッダ管理に記載した際、うまく動作しない場合があります。その際は、独自レイアウトのHTMLに記載してください。
コードをコピー＆ペーストする際は、コピー後一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。

<!--jquery読み込み-->
<script type="text/javascript" src="jquery-1.7.1.min.js">
</script>

<!--jqueryここまで-->


ちなみに、「<!--jquery読み込み-->と<!--jquery読み込みここまで-->」という表記は、ソース部分に記載する「メモ」のようなもので、記載しなくても問題ありません。

また、<script type="text/javascript" src="jquery-1.7.1.min.js">
の「src="jquery-1.7.1.min.js"」部分は、アップしたjQueryのバージョンを記載します。
尚、アップした際、ファイル名の「1.7.1.min」の部分が、「1-7-1-min」に変換されてしまう場合があるので、アップされたファイル名を確認して、適宜修正をおこないます。

<!--jquery読み込み-->
<script type="text/javascript" src="jquery-1-7-1-min.js">
</script>

<!--jqueryここまで-->


※2012年3月26日追記・5月4日一部修正
上記「jQueryの読み込みソース」は「同じフォルダ内にあるjQueryを読み込む」ソースになっています。

Jimdoの場合アップロードしたjQueryは自動的にヘッダ部分に記載されるため、この部分の表記は無くても動作しますが、Jimdoの「ファイル名が自動的に変化される」事象への対応として掲載します。

Jimdoのシステムとの干渉を防ぐため、右記のコードを追加します。

<!--Jimdo干渉防止コード-->

<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
/* ]]> */
</script>

<!--Jimdo干渉防止コードここまで-->


FlexSliderを動作させるコードを追加します。

サイトに記載されているデータのうち、

$(window).load(function() {
$('.flexslider').flexslider();

と記載されている箇所を

jQuery(window).load(function() {
jQuery('.flexslider').flexslider();

に変更します。

下記は変更したコードです（Jimdoにて保存した際、//<![CDATA[・・・//]]>　が自動で記載されたため、記載後のコードを掲載します。

<!--flexslider-->
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  jQuery(window).load(function() {
    jQuery('.flexslider').flexslider();
  });
//]]>
</script><!--flexsliderここまで-->


3：独自レイアウトの「ファイル」に「theme」フォルダにある画像データをアップ

「bg_control_nav.png」をファイルにアップします。
Jimdoでは画像データをフォルダ分け出来ず、_（アンダーバー）はｰ（ハイフン）に変更されてしまうので、次に追加するCSSデータを編集する必要があります。

※ver2.0からは「bg_control_nav.png」をアップしなくても下部のナビゲーションボタンが表示される様になりました。CSSで制御している様ですね。
※2014年8月時点でダウンロードできるver2.0は、画像データをアップロードする仕様になっています。

４：CSSデータを追加

ダウンロードしたファイル内の「flexslider.css（カスケードスタイルシートドキュメント）」を「レイアウト」⇒「独自レイアウト」⇒「CSS」に記載（コピーして貼り付け）します。

その際、CSSデータの中にある
(images/bg_direction_nav.png)
を
(bg-direction-nav.png)
に変更します。

5：表示させたい場所に「ウィジェット・HTML」で下記コードを追加

表示させたい場所に「ウィジェット/HTML」を選択し、右記コードを記載します。

挿入時何も表示されない場合がありますが、「プレビュー」ボタンを押すと、問題なく表示される（はず）です。

また、画像は予めアップしておきます。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>


ちなみに、上のスライドショーのソースは右記の通りです。

画像サイズは、サイトにあわせてjQueryが自動的に調整してくれます。

尚、独自レイアウトで使用している画像を探す際は、一度「プレビュー」表示させた画像データを右クリックなどで概要を表示させると、画像の参照元を見る事ができます。

IE6は動作対象外ですが、一応表示出来ますね（当サイトでエラーが表示される場合はサイト内の他ソースが原因です・・・）。

ただボタンのデータがpngなので、透過せずに表示されてしまいます。
別途IE6用にCSSを設定するか、透過gif等でデータを作成すると良さそうですね。

当スライダーはオプションも可能です。

設定方法は http://flex.madebymufffin.com/ の「Advanced」をご覧頂き試してみてください。

ver2.0から設定が簡単になり、サムネイル画像表示も出来る様になりました。

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://u.jimdo.com/www57/o/s08a4f3f151c3a616/userlayout/img/top2.jpg" alt="画像1" />
            <p class="flex-caption">
                キャプションを付ける事ができます
            </p>
        </li>

        <li>
            <img src="http://u.jimdo.com/www57/o/s08a4f3f151c3a616/userlayout/img/top3.jpg" alt="画像2" />
            <p class="flex-caption">
                オプションで画像表示アニメーションを変更できます
            </p>
        </li>
        <!-- 以下、画像分 -->
    </ul>
</div>


カテゴリ： Web技術関連, web関連検証, Jimdoテクニック

コメントをお書きください

コメント: 9
  • #1

    oh (日曜日, 05 8月 2012 10:08)

    この記事通りにFlexsliderを設置しましたが、やはり干渉しているのか
    ブログの新規記事を作成する際にてタイトル、日付、カレンダー変更ができませんでした。
    JQuery.jsを「レイアウト」⇒「独自レイアウト」⇒「ファイル」にアップすると上記の状態になりました。そこで、JQuery.jsを手動でヘッダ部分に書き込むと、jimdo編集画面のみでしかFlexsliderが動作しないという結果になりました。

    どこが原因でしょうか、ご教授ください。

  • #2

    ヒデ・ユーキ（どんなもんじゃろい管理人） (日曜日, 05 8月 2012 13:44)

    oh 様
    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。

    記事通りに設置頂いたとの事ですが、
    上記に記載してあります「干渉防止コード」は設置されましたでしょうか。

    設置頂いている場合は、より詳細にサイトを確認できればと思いますので、
    宜しければ「お問い合わせ」からサイトURLをご連絡頂ければ幸いです。

  • #3

    yume-jq (水曜日, 08 8月 2012 23:32)

    はじめまして　今現在この上記のとうりにコードを打ち込んだのですが、動きません

    ４：CSSデータを追加ダウンロードしたファイル内の「flexslider.css（カスケードスタイルシートドキュメント）」を「レイアウト」⇒「独自レイアウト」⇒「CSS」に記載（コピーして貼り付け）します。

    その際、CSSデータの中にある

    (images/bg_direction_nav.png)

    を

    (bg-direction-nav.png)

    に変更します。

    というところの(images/bg_direction_nav.png) というところが　

    ⇒「独自レイアウト」⇒「CSS」を開けたらもともと入っていたコードの中に見当たらなかったので無視して　もともと入ってたプログラム文の次に　ダウンロードしたファイル内の「flexslider.css」を

    コピペしたのですがそれがまずかったのでしょうか？

    なにとぞご教示下さい

    全くのド素人です。　当たり前のことをお聞きするかも知れませんが宜しくお願いいたします。

  • #4

    ヒデ・ユーキ（どんなもんじゃろい管理人） (木曜日, 09 8月 2012)

    yume-jq 様

    管理人のヒデです。
    こちらの記事もご覧頂き有難うございます。

    「flexslider.css」をコピーして貼り付けは問題ありません。

    変更する部分は、その貼り付けたCSSのコード内にある

    (images/bg_direction_nav.png)

    になります。

    このコードを

    (bg-direction-nav.png)

    に切り替えると、画面を変更する際のナビゲーション
    (矢印のマーク)
    が表示されます。

    ただこのソースの修正は、あくまでナビゲーションマークの表示に関するソースですので、
    表示については別の原因があるかもしれません。

    サイト拝見させて頂きましたが、「slide1.jpg」「slide2.jpg」「slide3.jpg」
    の画像が登録されて無い様ですので、
    「独自レイアウト」のメニュー項目にある「ファイル」より、上記ファイルをアップロードし、
    「HTML」または「CSS」の編集画面に切り替えた後「保存」ボタンを押して
    アップロードを反映してください。
    （アップロードのみですと反映されません）

    他のソース設置に問題がなければ、これで画像が表示され、動作する様になります。

    一度ご確認をお願い致します。

  • #5

    aguu3 (土曜日, 23 3月 2013 23:51)

    いつもお世話になっております。
    Jimdoフォーラムでは大変お世話になっております。

    JimdoのJQueryの件で質問差し上げて、hid55jp様のサイトを確認させて頂いて、上記の通りにやりましたが、編集画面ではスライドショーの枠のみ出てきて、プレビューにすると、見れないです・・・。何か原因があるのでしょうか？


    このサイトでJQueryの検証をしております。

    http://aguu3.jimdo.com

    何卒ご教授下さい。
    宜しくお願い致します。

  • #6

    ヒデ・ユーキ（どんなもんじゃろい管理人） (日曜日, 24 3月 2013 11:15)


    aguu3様

    管理人のヒデです。Jimdoフォーラムではお世話になっております。
    サイト拝見しました。複数のコードを使用していらっしゃいますね。

    可能性としては、他のjQueryと干渉、干渉防止コードが働いていない、画像のリンク（直接レイアウトの画像保管フォルダにアップしてみる）等が考えられますが、
    正確には一度ログインし、管理画面にて確認しないと判断が難しい状況です。

    恐れ入りますが、ご了承頂きます様お願い致します。

  • #7

    trinity-nagano (水曜日, 26 11月 2014 12:10)

    はじめまして
    上記の通りにコードを入力し動作するようになりましたが
    nextとprevのマークがこちらのサイトに表示されている物と違い
    別のマークが表示されます（「新規ページ」参照）
    ダウンロードしたwoothemes-FlexSlider-ce5441bに「theme」フォルダはなく
    「bg_control_nav.png」というファイルもありません
    また、flexslider.cssを開いて中を見ましたが
    「images/bg_direction_nav.png」というのがありません
    どのようにすればnextとprevのマークがこちらのサイトと同じように表示されるか
    何卒ご教授下さい
    よろしくお願い致します。

  • #8

    trinity-nagano (水曜日, 26 11月 2014 13:01)

    管理人のヒデ 様

    先程の質問ですが「更新情報」を下部までよく見ていませんでした
    旧バージョンで完全に動作確認できました
    申し訳ありませんでした

  • #9

    ヒデ・ユーキ（どんなもんじゃろい管理人） (水曜日, 26 11月 2014 15:05)


    trinity-nagano 様

    管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。

    画像データの件、解決した様で何よりです。
    本ページも含め、サイトの見やすさを向上する様改善していきますね。

▲このページのトップへ