自動生成ページ(CMS)にスライドショーを実装する方法を解説!①~Googleスライド編~

こんにちは、ワニエです。

e-shopsカートSで提供しているページ自動生成機能(CMS)では、基本的にHTMLやCSSの記述方法などはサポート対象外とさせていただいていますが、自動生成ページ機能をご利用のショップ様より「スライドショーを埋め込むにはどうすればいいですか?」といったお問い合わせを定期的に頂きます。

あいにくページ自動生成機能においては、スライドショー機能はご用意がないため、ショップ様ご自身でお調べいただき各自ご対応いただいておりますが、今回はスタッフブログということで自動生成ページにスライドショーを実装する方法を解説していきたいと思います!

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用くださいm(_ _)m

さて、スライドショーの実装にあたっては、いくつか方法があります。具体的には

・Googleスライドを使ってスライドショーを実装
・jQueryと呼ばれるJavaScriptのプラグインを使ってスライドショーを実装

などがありますが、今回は超簡単にスライドショーが実装できる「Googleスライド(パワーポイントのようなツールです)」を使ったスライドショーの実装方法をご案内します。


GoogleスライドをWebページに埋め込んだイメージはこんな感じです↓




Googleスライドの実装方法

まずは事前に自動生成ページに埋め込みたいスライド(画像)を「Googleスライド」を使い作成してください。

※GoogleスライドはGoogleアカウントがあればどなたでも無料で作成出来ます。
Web上で「Googleスライドの使い方」と検索すると、利用方法が確認できるかと思います。


そして、メニュー内の「ファイル」>「ウェブに公開」 をクリックします。

「埋め込む」タブを選択し、スライドのサイズや自動再生などお好みで選択します。

選択が完了したら、「公開」をクリックすると、下図のようにWebページに埋め込むためのHTMLタグが表示されますので、それを全てコピーします。




次にコピーしたHTMLタグをe-shopsカートS管理画面に設定していきます。


管理画面「ページ自動生成」>「コンテンツ設定」タブを開き、画面最下部にある自由項目の「自由項目追加」をクリックします。


表示された画面内にある「内容」に貼り付けて、「設定する」をクリックします。

最後に自由項目に登録したスライドショーを表示させるために、「コンテンツ配置」タブを開きます。

今回は、メインコンテンツのトップ部分に表示したいので”メイン(上部)”の「追加」ボタンをクリックしてから、右側に表示された配置可能なコンテンツから「スライドショー」をクリックして「コンテンツ設置を保存する」ボタンをクリックします。



以上でGoogleスライドを使ったスライドショー機能の実装が完了です。

こちらのサンプルショップでも実際にGoogleスライドを埋め込んだ際の表示例をご確認いただけます。

https://shop.kanmi-ya.com/(CMSサンプルショップ)


どうでしたか?とても簡単に実装することが出来たかと思います。
ネットショップにスライドショーがあることで、サイトのイメージやキャンペーン情報、お得情報などを視覚的に伝えることが出来ますので、ぜひ活用してみてください♪

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用くださいm(_ _)m

カテゴリー: 自動生成ページ構築