作業マニュアル

スライダー(画像のスライドショー)の作り方

スライダーの完成イメージ

安心犬活のスライダー：
https://dogfood-atoz.com/archives/3518

【注意】公式サイトのURLは「Pretty Links」のURLを使用してください

当サイトの公式サイトのURLは全て「Pretty Links」で作成されているURLをご使用願います。もし「Pretty Links」に該当のURLがなければご連絡願います。

＜具体例＞リクナビNEXTの公式サイトのURL

OK：
https://career-atoz.com/prettylinks_rikunavinext_2

NG例：
https://next.rikunabi.com/rnc/docs/cp_s11011.jsp?pr_nm=123-lp01

上記のNG例のように、直接、公式サイトのURLを使用してはいけません。必ず「https://career-atoz.com/prettylinks_XXXXX」のURLを使ってください。

スライダー(画像のスライドショー)の作り方

スライダーはゼロから作るのは大変なので、既存のスライダー画像を複製して、複製したスライダーを編集する方法を取ります。

スライダーは「Smart Slider」(プラグイン)を使用します。

大まかな流れは下記の通りです。

  1. 既存のスライダーを複製する
  2. スライダーの名称を変更する
  3. 背景画像を入れ替える
  4. URLを変更する
  5. 残りの2枚分の画像を設定する
  6. ローディング画像を変更する
  7. 動作確認

スライダー作成の具体例

レガリエドッグフードのスライダーを元にして、「安心犬活」のスライダーを作成する手順は下記の通りです。LPのスライダー用画像(1つのLPにつき3枚)が完了していることが前提での手順となります。

安心犬活のLP：
https://dogfood-atoz.com/prettylinks_anshinkenkatsu

既存のスライダーを複製する

お手本となるスライダー(ここでは「レガリエドッグフード」)の右上の「…」を選択して、「Duplicate(複製)」をクリックします。

スライダーの名称を変更する

複製したスライダーのEDIT(編集)をクリックします。

Name(名称)を「安心犬活」に変更して、「SAVE(保存)」ボタンをクリックする。

背景画像を入れ替える

1枚目の画像の「EDIT」をクリックします。

Slide Backgroundの「＋」ボタンをクリックして、安心犬活の画像に差し替えます。右上のSAVEボタンをクリックして、保存します。

URLを変更する

URLを「https://dogfood-atoz.com/prettylinks_anshinkenkatsu」(安心犬活のLP)に変更して、「INSERT」ボタンをクリックします。右上のSAVEボタンをクリックして、保存します。

残りの2枚分の画像を設定する

1枚目と同じ手順で、2枚目と3枚目の画像、URLを変更します。

ローディング画像を変更する

Dashboard→安心犬活をクリックして、トップに戻ります。

「Loading」を選択します。

Background Imageの「＋」ボタンをクリックして、1枚目の画像を選択します。

右上のSAVEボタンをクリックして、保存します。これでスライダーの作業は終了です。

動作確認

「General」を選択して、[smartslider3 slider=”49″]の文字列をコピーします。

投稿の「新規追加」で、タイトルを「スライダー動作確認」に設定します。

先程、コピーした[smartslider3 slider=”49″]の文字列を本文にペーストします。

「下書き保存」ボタンをクリックして、記事を下書きとして保存します。最後に「プレビュー」ボタンをクリックします。

プレビュー画面で確認する点は次の3点です。

  1. ローディング画像(スライダーが読み込まれるまでに表示される画像)は1枚目の画像に設定されているか？
  2. 画像のスライドがうまく機能しているか？
  3. 各画像（合計3枚）をクリックすると、LPのページに新しいウィンドウで正しく開くか？

これらの3つの確認が取れれば、全工程終了となります。

補足事項

各スライダー画像の「Side Title」の名称

連番で「1」「2」「3」と設定願います。