こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
ドロップシッピング3ヶ月集中講座『研究生制度』3月生の募集を開始しました。
▼3月1日開講 研究生制度（ドロップシッピング3カ月集中講座）
今年2019年からは、Webメディアを軸とした運営の情報提供に注力していきます。
1年後、3年後と中長期的な視野でじっくり取り組みたい方に参加してもらえたら嬉しいです。
さて、今週はWordPressとショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今回は、ショップできすぎくんにスライダーを入れる方法です。
研究生の間でも人気のスライダー。
実装したいと相談の多い項目でもあります。
事前にデータをアップロードするサーバーが必要ですが、興味のある方は岡田さんの解説でスライダーをショップできすぎくんへの実装にチャレンジしてみてください。
ショップできすぎくんにスライダーを入れたい！
皆さま、こんにちは！
岡田です。
先日、奥成先生の元に「ショップできすぎくんにスライダーを入れたい。」とのご相談が寄せられたと伺いました。
私も以前から試してみたいなと思っていたので、良い機会だと挑戦してみました。
スライダーとは
複数の画像やテキストなどを自動的にスライドさせる表示方法です。「カルーセル」「スライドショー」とも呼ばれます。
多くのWebサイトで使われている技法で、画面をスクロールしなくてもアピールしたいコンテンツを次々と見せることができます。
何よりも動きがあることで閲覧者の注意を引くことができ、特に注目してほしいコンテンツへの誘導が期待できます。
プラグインを使ってみる
スライダーはJavaScriptとcssを組み合わせて作りますが、いちからコーディングするのは面倒です。
また、ショップできすぎくんで使うには、レイアウトが１カラムでも２カラムでも、パソコンでもモバイルでもちょうど良いサイズで表示するようにしたいです。
併せて、画像のサイズや枚数に制限が無く、自由に変更できるのが理想です。
これらのことから手作りするのではなく、既存のプラグインを使ってみることにしました。
調べてみると、いくつかのプラグインが見つかりました。その中から使い勝手が良さそうな「slick」というプラグインを使ってみました。
ショップできすぎくんで使う場合の問題点
「slick」では、「slick」公式サイトを見ればわかるように、コンテンツを手動で左右に移動させる矢印と、コンテンツ下のインジケーター（○印）は、「slick」に組み込まれたデザイン性の高いアイコンフォントが表示されます。
ところが、ショップできすぎくんに使ってみると、パソコンではこのアイコンフォントが表示されません。
ところが、手持ちのスマホ（iPhoneSE）の「Safari」「Chrome」だと表示されます。
疑問に思いいろいろ試してみると、パソコンでは「Safari」では表示され、「Chrome」「IE」「Firefox」では表示されませんでした。
利用しているOSやブラウザのバージョンで異なるかもしれませんが、これでは「slick」のアイコンフォントを使わないように変更するしかないようです。
まとめ
上記の問題点をどうにかできないか、ちょうど良いサイズで表示できないかと、試行錯誤の結果、やっと満足できる状態まで持って来ることができました。
こちらのサンプルページをご覧ください。
3枚セットスライダーでは、もしもの商品画像の幅300pxの画像をそのまま、シングルスライダーでは、幅600pxの商品説明画像を高さ200pxにトリミングして使用しています。
スライダーを設置するには、自分のサーバーに必要なファイルをアップロードしなければなりませんが、JavaScriptとcssについて詳しい知識が無くても、利用できるように解説をいたしました。
ぜひ、チャレンジしてみてください。
読者の皆さまへ「バレンタインプレゼント」※2019年3月末日まで
このメルマガを読んでいただいた方に、必要なファイルをまとめてプレゼントいたします。
3枚セット、シングルスライダーどちらでも利用できます。
ダウンロードはこちらから
※2019年3月末日までにダウンロードください。
見本ページの解説を参考にして設置してくださいね。
見本ページはこちらです。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ホームページ制作｜エヌツーエヌコミュニケーション
□ぐるめ通販トライアルのブログ
———————————————————–
※この記事は2019年2月14日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』の一部を修正、改訂して掲載しています。メルマガのご登録はこちら
