Smart Sliderプラグインでレスポンシブに対応したメインビジュアルを素早く作成する手順

こんにちは、運営事務局です。

本日はinstantLPが標準対応している『Smart Slider(プラグイン)』を使ってメインビジュアルを作成する手順をカンタンにご紹介いたします。

このプラグインを使えばメインビジュアル作成時に外注デザイナーさんへ依頼する必要がなくなります。また編集はパソコン上で行えるためhtmlコーディングの調整なども一切必要ございません。

1. Smart Slider設定画面で編集

では、今回はすでに作成されているサンプルを元に編集していきましょう。

画面上部のSmart Sliderにマウスを合わせるとメニューが表示されます。

ここでは『#1 – Sample Slider』をクリックします。サンプルは以下のようにスライダーが3つ設定済みなので一番左(Slide One)を選択しましょう。

ピンク色の枠で囲った一番左のスライダー箇所をクリックすると下記の画面が開きます。さきほどサムネイル上で表示されていた画像がSmart Sliderの編集画面内に表示されています。メインビジュアルに手を加えていきましょう。

英語で「MARTIN DWYER」と「Application Developer」と2行の文字があるのでそれぞれをマウスで選択して「文言」を変更してきましょう。

注意点としては必ず「Tag」に『div』を選択しておくことです。hタグを選ぶとinstantLP側のデザインで上書きされてしまいますのでご注意ください。

あと、文字の詰まり具合など、さらに細かく制御したい場合は、鉛筆マークのアイコン横に並んでいる『ペンキマークのアイコン』をクリックします。

ここで文字色やフォント種類、斜体文字などが設定できます。そして、右下にある『MORE』ボタンを押すとさらに細かいコントロールが可能になります。

この『MORE』ボタンを押すと以下の大きな画面がさらにオープンします。

文字の横方向の詰まり具合を変更する場合は「レタースペーシング」を変更。

変更が完了したら画面上部の『SAVE』ボタンを押して保存しましょう。

無事、変更が完了すると、以下の画面が表示されます。

最後に「スライダーの残り2つ」は一旦停止にしておきましょう。チェックマークをクリックするとバツマークになりスライダーが一時無効化できます。

もしスライダーを複数切り替えたい場合はチェックマークのままでOKです。

2. LPページ側へSmart Sliderを差し込む

上記で編集したSmart SliderをLPページ側へ埋め込んでいきます。さきほどのスライダー箇所のすぐ下に読込用の『ショートコード』が表示されています。

では『ショートコード』をコピーして、LPページ内へ埋め込んでいきます。

次に「LPページのタイトルが入ります」のLPページを開きます。

編集画面ではエディターを「ビジュアル」から「テキスト」モードへ変更。

エディターの右上にある「テキスト」をクリックしましょう。エディターモードの切り替えが完了するとエディター部分の表示が少し変わります。切り替わったら一番上の部分にさきほどのショートコードをペーストしてください。

ショートコードを貼り付けたら『更新』ボタンをクリックしましょう。

この時にページ側に設定されているアイキャッチ画像は削除してください。

以上で設定が完了いたしました。

3. ページ側の表示を確認する

無事メインビジュアルにSmart Sliderが表示されました。以上でinstantLPへの埋め込み作業が完了いたしました。順を追った説明だと長く感じてしまいますが慣れれば数分で完了する作業です。ぜひともお試しくださいませ。

この手順ではあえて背景画像を変更せずに進めましたが、いかなる画像にも差し替え可能です。参考までとなりますが設定は以下の箇所にて行えます。

まずはデモ操作を申し込んで実際に画像差し替えもテストしてみてください。

LP作成に特化した無料テーマ↓

最終更新日:2018/11/08

記事にコメントを残す

※メールアドレスは公開されません

トラックバック用URL