jimdo jquery スライドショーの埋め込み方法

Jimdoでは、カスタムコードやJavaScriptを埋め込む機能が限定的ですが、基本的にはHTMLウィジェットを使用して外部のスクリプトやコードを埋め込むことができます。ただし、Jimdoが提供している機能や設定に基づいて操作することが重要です。以下に、jQueryスライドショーを埋め込む基本的な手順を示します。

jQueryの準備

まず、jQueryをホスティングしたり、CDN（Content Delivery Network）を使用して読み込む必要があります。例えば、以下のようにCDNを使用することができます。

スライドショープラグインの取得

jQueryをベースとしたスライドショープラグインを取得し、それをJimdoに埋め込む必要があります。例えば、Slickなどがあります。

HTMLウィジェットの追加

Jimdoのページ編集画面に移動し、スライドショーを表示したい場所にHTMLウィジェットを追加します。

スクリプトの埋め込み

HTMLウィジェット内に、以下のようにjQueryスクリプトやスライドショープラグインの初期化スクリプトを埋め込みます。以下はSlickスライダーの例です。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

ただし、Jimdoが提供しているエディタにおいて、jQueryが利用可能かどうかや、外部スクリプトの許可があるかどうかには制限がある可能性があります。

プレビューと保存

追加したスクリプトや設定が正しく機能するか確認するために、プレビューモードでページを確認しましょう。問題がなければ、変更を保存します。

<div class="your-slider">
    <!-- ここにスライドのコンテンツを追加 -->
    <div><img src="slide1.jpg" alt="Slide 1"></div>
    <div><img src="slide2.jpg" alt="Slide 2"></div>
    <!-- 他のスライドも同様に追加 -->
</div>

<script>
    $(document).ready(function(){
        $('.your-slider').slick({
            // Slickスライダーの設定オプションをここに追加
            autoplay: true,
            dots: true,
            // 他のオプションも追加可能
        });
    });
</script>

＜注意＞
Jimdoのプランやバージョンによっては、外部スクリプトの埋め込みが制限されている場合があります。必ずJimdoの利用規約やサポートドキュメントを確認し、それに従ってください。