こんな疑問にお答えしていきます。
本記事の内容
- 高機能無料プラグイン「スマートスライダー」の使い方を教えてほしい
- ＳＥＯランディングページのメイン画像に使えるスマホ対応ツールを知りたい
- 管理画面上で文字や背景画像を入れ替えて作り込める画像作成方法が気になる
目次
ＳＥＯランディングページでスマホ・タブレットに対応した「スマートスライダー」を表示する方法
本記事は「ＳＥＯランディングページの見たまま編集でＬＰページを作る」の続きです。ランディングページを作り込む際に「アイキャッチ画像（メイン画像）」の代わりにレスポンシブ対応で高機能な無料プラグイン「スマートスライダー（Smart Slider）」を使う方法をご紹介いたします。
スマートスライダー（Smart Slider）の使い方
スマートスライダーは無料で使えるレスポンシブ対応の画像作成ツールです。ワードプレスの管理画面からスマートスライダーのプラグインをインストールさえすれば画像作成の基本機能が使えます。
１. プラグインをインストール
管理画面の「プラグイン > 新規追加」をクリック。
次に検索ボックスに「Smart Slider」と入力して検索。
Smart Sliderが出てきたら「今すぐインストール」をクリック。
クリックするとインストールが始まります。
インストールが終わったら「有効化」をクリック。
- 超快速なワードプレスを運営しませんか？【AD】-
正しく「有効化」ができると下記のメッセージが表示されます。
２. スライダーデータをインポートする
左側に「Smart Slider」というメニューが追加されました。もしメニューが表示されない場合はワードプレスの管理画面内から一度ダッシュボードを開くなど「更新」もお試しください。
下記がスマートスライダーの設定ページです。
デフォルトではサンプル画像が１つです。ＳＥＯランディングページ専用に作ったメインビジュアルのサンプルデータのインポートするために「インポートアイコン」を押してください。
インポート画面が開いたら「ファイルを選択」をクリック。
選択画面が開いたら「SEO-landingpage-MV.ss3」を選んで「開く」をクリック。ファイルはこちらからダウンロードください。ブラウザによってはファイルを直接ダウンロードできない場合があるため念のために圧縮したデータを置いておきますので解凍してご活用くださいませ。
ファイルが選べたら「IMPORT」をクリック。
下記のメッセージが表示されたらインポート作業の完了です。
３. データを編集して仕上げる
手順「２」でインポートが完了すると下記が表示されます。マウスを乗せましょう。
すると「EDIT」ボタンが表示されるのでクリックしてください。
編集画面が開いたら文字を編集していきましょう。変更したい部分をマウスで選ぶと編集できるボックスが表示されます。お好きな文字に置き換えてテキストを調整していきます。
微調整が終わったら「SAVE」をクリック。
すると下記のメッセージが表示されます。
４. ページ側にタグを設置する
左上にある「SLIDER」 をクリックしてください。
すると「Shortcode（ショートコード）」が表示されます。
マウスで選択したら右クリックで「コピー」しましょう。
次に差し込みたい「作成済みのLPページ」を開いてください。そして、スマートスライダーを差し込む場合はアイキャッチ画像の必要がなくなりますので「アイキャッチ画像を削除」を押しておきます。もちろんアイキャッチ画像を使いながらスマートスライダーも使えますのでご安心ください。
※アイキャッチ画像を削除してもデータは「メディア > ライブラリ」に残ります
アイキャッチ画像の設定が解除されたら下記画面になります。
次にさきほどコピーしたタグを任意の場所に差し込みましょう。もし作成済みのページが「エディター」がビジュアルモードになっている場合は「テキスト」側に切り替えてください。
テキストに切り替えたら、さきほどコピーしたタグを貼り付けてください。また、プラグイン専用のボタンを使って直接挿入する方法もあります。すぐ下にある「Smart Slider」のボタンを押します。
画面が開いたら画像をクリック。ちなみに選択時に表示されているサムネイルは「GENERAL」内で設定されているので変更も可能です。もし変更したい場合は該当箇所からサムネイル画像を調整ください。
すると下記のようにショートコードがエディターの中に差し込まれます。
その後、保存したらページ側を開いてください。
５. 編集はトップページからでOK
ワードプレスの管理画面にログインした状態でページを開くと管理バーが表示されます。そのなかにあるSmart Sliderのメニューからも直接編集画面へ移動が可能です。
編集は文字を選択して入れ替えるだけです。
編集後に保存は忘れず行ないましょう。
実際にスマートスライダーを当て込んだページは下記です。
⇒ https://wp-labo.com/seo-landingpage/
【今すぐ無料プラグインを手に入れる】
→ 無料ダウンロードはこちら
