パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
サイトセクションで、サイトを選択し、「サイトビルダーを開く」をクリックします。
サイトに複数のページが含まれている場合は、必要なページを選択してください：
1. ビルダー上部にある現在のページタイトルをクリックします。
2. ドロップダウンリストから必要なページを選択してください。
ページ上の任意の場所で、「ブロックを追加」をクリックします。
カスタムコードブロックを選択します。
エフェクトスクリプトを含むHTMLコードを、以下の2つの方法のいずれかで追加します：
- 独自のコードを使用する。
- 既製のスクリプトを使用する。手順は以下の通りです：
  1. ブロックに以下のコードを挿入します：

Copy

Full screen

Small screen

 1<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
 2<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 3<script>
 4  var script = document.createElement('script');
 5  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
 6  script.addEventListener('load', function() {
 7    $('.img-holder').imageScroll({
 8      holderClass: 'sb-image-holder',
 9      speed: 0.5
10    });
11  });
12  document.getElementsByTagName('body')[0].appendChild(script);
13</script>

1. 1. 画像にパララックス効果を適用するには、data-image属性にその画像へのリンクを入力します。

「プレビュー」をクリックして変更内容を確認します。

この手順については、チュートリアルビデオをご覧ください：

ご意見ありがとうございました！

あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

お役立ちリンク

指定したブロックまでページをスクロールさせる方法

最終更新日: 2026年4月29日

誤字脱字などのテキストエラーを見つけましたか？テキストを選択し、Ctrl+Enterを押します。

内容

仕組み
入手方法