落ちこぼれサラリーマンに役立つ情報をご紹介

ワードプレス簡単!ブログで画像スライドショーを作る方法

溶岩

ワードプレスで簡単に画像や動画のスライドショーを作成できるプラグインの紹介です。

その名はSmart Slider 3。

英語のプラグインですが、初心者さんでも分かりやすい説明しますのでご安心を。^^

 

プラグインSmart Slider 3を導入するメリット

スライドショーをブログに導入すれば、ブログの滞在時間がアップします!

つまり、グーグルの評価を上げることができます。

また、スライドショーの画像をクリックすると、各記事にジャンプする設定もできます。

こうすれば、ブログのPV(ページビュー)が増えますね。

 

スライドショーを作るためのプラグインはいくつかありますが、その中でも特に使いやすいのはSmart Slider 3です。

 

インストール方法

管理画面にログイン⇒プラグイン⇒新規追加

Smart Slider 3

 

検索ボックスに「Smart Slider 3」と入力。

Smart Slider 3

 

「今すぐインストール」をクリック。

インストール

 

「有効化」をクリック。

有効化

 

スライドショーの作り方

「Smart Slider」をクリックし、「Create Slider」をクリック。

Smart Slider

 

これから作るスライダーの名前をつける(適当でOK)⇒「Create」をクリック。

Smart Slider 3

 

「Add Slide」をクリック。

SmartSlider3

 

画像は、あらかじめブログにアップロードしている画像から選択できます。「Image」をクリックして、スライドショーに乗せる画像を選択します。

動画はYoutubeにアップロードされている動画から選択できます。「Video」をクリックします。

メディア取り込み画面

 

動画をスライドショーに入れる場合は、Youtube動画のURLを以下のようにコピペ(コピー&貼り付け)して、「ADD VIDEO」をクリック。

動画の取り込み画面

この手順を繰り返して、スライドショーに乗せる写真と動画を選択していきます。

 

スライドショーの写真と動画を選び終わったら、SAVE(保存)をクリック。

保存画面

 

埋め込み方法

ショートコードが作られているので、コピーします。

ショートコード

 

このようにブログ記事の編集画面にショートコードを貼り付けます。

ショートコード

 

画像をクリックしたら記事にジャンプする設定

スライドショーの画像をクリックしたら、任意の記事にジャンプする設定ができます。

この設定をすることで、読者さんを記事に案内して、ブログのPV(ページビュー)数を伸ばすことができます。

手順は次のとおりとなります。

 

画像のEDIT(編集)をクリック。

Smart Slider 3

 

画像のSettings(各種設定)をクリック。

Smart Slider 3

 

下の画像の赤枠の場所をクリック。記事を選択します。

Smart Slider3

設定は以上となります。

 

【トラブル】スマホだと画面がカクカクする

スマホでスライドショーを見ると、画面がカクカクするトラブルが確認されました。

結論から言うと、画像が切り替わるときのアニメーションに原因があります。

このトラブルを解消するための方法を記しておきます。

画像を一括で修正する方法(おすすめ)

ダッシュボード画面から、修正したいスライドショーの「EDIT」(編集)をクリック。

Smart Slider 3

 

スライド名の横の鉛筆マークをクリック。

 

Background Animationの「ANIMATIONS」をクリック。

 

デフォルト(初期設定)では、Zoom(ズーム)になっているので、Fade(フェード)にチェックします。

Smart Slider 3

 

フェードにチェックを入れたら、「Apply」(適用)をクリック。

Smart Slider 3

 

画像を1つずつ修正する方法

まず修正したいスライドショーの「EDIT」(編集)をクリック。

Smart Slider 3

 

Animation(アニメーション)をクリック。

Smart Slider 3

 

下の図の赤枠の場所をクリック。

Smart Slider 3

 

デフォルト(初期設定)では、Zoom(ズーム)になっているので、Fade(フェード)にチェックします。

Smart Slider 3

 

フェードにチェックを入れたら、「Apply」(適用)をクリック。

Smart Slider 3

以上の手順を他の画像について繰り返します。

 

全て終わったら「Save」(保存)をクリックします。

Smart Slider 3

以上の手順で、スマホでスライドショーがカクカクする問題を解決できるはずです。

 

デメリット「読込速度が遅い!」

スライドショーを入れると、ブログの質が一気に高まりますが、やっぱりデメリットも感じました。

スライドショーを埋め込んだページの読み込み速度が遅くなります。

私は写真を40枚と動画1つのスライドショーを造りましたが、スマホで読み込むのに1分以上かかりました。これでは遅すぎる!

写真を5枚、動画1つを削除したところ、格段に読み込み速度が速くなり、10秒ほどで読み込めました。

遅さ対策としては、「動画を入れない」「写真を少なくする」ことが有効ですね。

 

広告

まとめ

いかがだったでしょうか。

ぜひプラグイン「Smart Slider 3」をあなたのワードプレス・ブログに導入して、ブログの滞在時間とPV増加にお役立てください。

この記事が悩んでいるあなたの元へ届きますように・・・。^^

関連記事

プロフィール

夢は、成しとげる

氏名 : ヌコ&ララ
年齢:三十路