Skip to content
さきどりふぁくとり~
プラグインインストール
GoogleAnalytics
GoogleAdsense
jQuery

WordPressプラグインでスライドショーを作成する方法

更新日:2020年6月26日
あまり多くの画像をサイトで紹介しようとすると、どうしても縦が長くなってしまいスクロールが長くなるためユーザビリティが下がります。 多くの画像をユーザーに見やすく表示させるために有効な手段がスライドショーです。 テンプレートを直接カスタマイズしてスライドショーを実装しようとすると、簡単に画像が増やせなかったりソースコードが長くなってしまったりと実装だけでなくその後の管理も大変になります。 しかし、WordPressではプラグインを利用してスライドショーを作成することができます。
  • WordPressでスライドショーを作成するプラグインを知りたい
  • スライドショーを簡単に実装したい
上記のような方に向けて、スライドショーを簡単に実装できるWordPressプラグインを紹介します。

目次

  • 1 「Meta Slider」
    • 1.1 特徴
    • 1.2 使い方
  • 2 「Smart Sider3」
    • 2.1 特徴
    • 2.2 使い方

「Meta Slider」

特徴

4つのパターンと様々なアニメーションを選択することができ、サイズの調整や動きの指定などもできるため、多様なスライドショーが作成できます。

使い方

管理画面のプラグイン>新規追加からMeta Sliderをインストール、有効化します。 プラグインを有効化すると、管理画面にMeta Sliderメニューが追加されます。 Meta Slider>Meta Sliderから画面右の「Create blank slideshow」をクリックしてスライドショーを作成します。 「スライドを追加」をクリックして、スライドショーで表示したい画像を選択します。 画像を選択するときにキャプションを入力すると、スライドショーにもキャプションとして表示させることができます。 上の画面の時に画像を複数選択することもできます。(Shiftキー押しながらクリック) 画像が追加されました。 あとは、右サイドバーでスライドショーの設定をしていきます。

タイトル

スライドショーのタイトルです。 スライドショーの区別をするためにタイトルをつけておきましょう。

幅

スライドショーの幅です。

高さ

スライドショーの高さです。

効果

FlexSlider(デフォルトのスライドショー)の場合はフェード(画像がふわっと切り替わる)のみ R.Slides(レスポンシブ対応スライドショー)の場合もフェードのみ Nivo Sliderは最も多くの切り替え時の効果が選択可能 Coin Sliderはランダム、回転、レイン、ストレートから選択可能

矢印

前後の画像へ切り替えるための矢印を表示するかどうかです。 チェックボックスにチェックが入っている場合は矢印を表示します。

ナビゲーション

スライドショーの中央下についていることが多いナビゲーションです。 ナビゲーションの表示非表示を選択できます。 スライドショーの設定が完了したら、ショートコードで挿入することができます。 直接テンプレート内に挿入する場合にはグレーの部分も含めて
<?php echo do_shortcode('[metaslider id="50"]'); ?>
を挿入します。 管理画面のエディタ内に挿入する場合には赤文字の [metaslider id=”50″] を挿入します。

「Smart Sider3」

特徴

無料版でもサムネイル付きのスライドショーを作成でき、動画も自動再生が可能なスライドショープラグインです。 レスポンシブにも対応しています。

使い方

管理画面のプラグイン>新規追加からSmart Sider3をインストール、有効化します。 Smart Sider3を有効化すると、管理画面に「Smart Sider」メニューが追加されます。 Smart Siderの中の「NEW SLIDER」をクリックしてスライドショーを作成します。 作成するスライドショーの初期設定をする画面がポップアップで表示されるので、各種設定をしましょう。 今回はデフォルトの状態のままスライドショーを作成するので、このまま「CREATE」をクリックします。 次の画面で、スライドショーに使用する画像を登録します。 画像を登録したら、画面右上の「SAVE」をクリックして保存します。 作成したスライドショーを固定ページに挿入します。 ブロックエディタにも対応しているので、「ブロックを追加」から簡単に挿入することができます。 ブロックを追加から「SmartSlider3」を選択すると、挿入するスライドショーを選択することができます。 「SELECT SLIDER」をクリックします。 ポップアップでSmartSlider3に登録されているスライドショー一覧が表示されます。 ここで、先ほど作成したスライドショーを選択すれば、固定ページへの挿入は完了です。 視覚的に目立たせることが可能なスライドショーを利用して、ユーザーにアピールしたいコンテンツ部分にスライドショーを導入するのが効果的な見せ方です。 スライドショーは、ユーザーを足止めできる効果もありコンテンツの見せ方としては有効な反面、スライドショーから得られる情報が少なかったりサイトの内容とあまり関連性のない画像を表示していたりするとユーザーが離脱してしまう可能性も高くなるため、活用の仕方やデザインにもこだわって利用するとより効果的です。

関連記事

【WordPress】用途別予定表プラグイン一覧【おすすめを紹介】

WordPress

WordPressで任意のページに背景画像や背景色を設定できるプラグイン

WordPress

WordPressで画像挿入時のHTMLをカスタマイズする方法

WordPress

無料と有料とで何が違う?WordPress有料テンプレートの強みとは?

WordPress

プロフィール

ブログ著者:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

最近の投稿

  • YouTube広告の再生時間などの指標を見る方法は?
  • YouTubeの広告で動画再生数を伸ばす方法の解説と単価
  • YouTubeへ広告を出す効果やメリット、広告の出し方を解説
  • YouTubeの広告が効果なしになる原因と対策を解説
  • YouTuberになるのに必要なビデオカメラや機材を紹介

カテゴリー

  • conohaWING (1)
  • JavaScript (3)
    • jQuery (3)
  • PHP (2)
  • SEO (18)
  • Webマーケティング (3)
  • WordPress (62)
    • Favicon (5)
    • インストール (2)
    • プラグイン (33)
    • 使い方 (1)
  • YouTube (29)
    • アナリティクス (4)
    • 副業 (2)
    • 動画制作 (3)
    • 収益化 (12)
      • 審査 (2)
      • 著作権 (1)
      • 設定 (3)
        • スマホ (1)
    • 広告 (6)
  • おすすめの書籍 (1)
  • お名前ドットコム (1)
  • アクセスアップ (5)
  • アクセス解析 (5)
    • GoogleAnalytics (4)
  • アフィリエイト (11)
  • プライバシー・ポリシー (1)
  • マネタイズ (16)
    • GoogleAdsense (10)

アーカイブ

  • 2021年4月 (4)
  • 2021年3月 (5)
  • 2021年2月 (10)
  • 2021年1月 (4)
  • 2020年12月 (5)
  • 2020年8月 (20)
  • 2020年7月 (26)
  • 2020年6月 (6)
  • 2020年5月 (2)
  • 2020年4月 (10)
  • 2020年3月 (11)
  • 2020年2月 (10)
  • 2020年1月 (15)
  • 2019年12月 (1)
  • 2017年12月 (2)
  • 2017年11月 (1)

目次

  • 1 「Meta Slider」
    • 1.1 特徴
    • 1.2 使い方
  • 2 「Smart Sider3」
    • 2.1 特徴
    • 2.2 使い方
Copyright © 2019 さきどりふぁくとり~ All Rights Reserved.