超多機能！スライドショープラグイン「Smart Slider3」（WordPress/Cocoon環境）

ワードプレス記事内の好きな場所にスライドショーを入れる良い方法がないか調べて「Smart Slider3」を試してみたので記事投稿します。

旅行ブログとういう特性上、どうしても記事内の写真が多くなります。読者の方が読み疲れしないようにテキストについては多少なりとも工夫しているのですが、写真を多くすると「縦スクロール」でゴールが遠くなります。これだと途中離脱されないか不安です。

記事投稿するうえで「情報の引き算」は大切な考え方だと認識しつつ、現地に行って撮影してきた貴重な写真だ。なんとか詰め込みたい（要するにワガママ

当ブログでは、ワードプレスのテーマとしてCocoon（コクーン）を使っています。この記事投稿時点では、記事内の任意場所でのスライドショーは使えません。Gutenbergにそれっぽいものはあるのですが使い勝手はイマイチ。

いくつか探して「Smart Slider3」が使えそうだったのでご紹介します。ほかのワードプレステーマでも使えると思います。

Cocoonテーマでのスライドショー機能

カルーセルは用途が絞られる

Cocoonテーマでもスライドショー機能は備わっています。

ただ、投稿/固定/インデックスの各ページ最上部に設置する仕様です。それとこの機能は記事一覧を表示するためのものです。記事内の任意な場所に入れたり、好きな写真を表示したりはできない。

JetPackにスライドショー機能があるが…

ただ、Cocoonテーマの高速化設定を外す必要がありました。当然のことながら、外したくないです。

Gutenbergにあるギャラリー機能

Gutenbergといえば、まだ取り入れていない人もいるでしょうが、当ブログではすでに完全移行しました。

慣れるとこっちのほうが記事投稿はしやすいし、表現力が豊かです。で、Gutenbergにスライドショーに近い「ギャラリー機能」が備わっています。この機能も使いつつ、縦スクロールを減らす努力はしつつもやや不満でした。

Gutenbergのギャラリー機能は複数の写真を選択して、指定した枚数でまとめて表示する機能です。スライドショーも可能で、画像自体へのリンクを貼るとスライドショーとして使えます。

• 

• 

• 

• 

• 

▲ 画像をクリックすると、スライドショーになります。

▲ 但し、記事内で複数のギャラリー（スライドショー付き）を使うと、スライドショーが立て続けに表示されてしまいます。伝えたいことのストーリーを区切れない。

スライドショープラグイン「Smart Slider3」

ということでプラグインを探してきました。似たようなものはいくつかあるのですが、とりあえず使いやすかったのが「Smart Slider3」プラグインでした。

プラグイン概要

主な機能

かなり多機能、私が求めていた以上のことが出来ます。カスタマイズ要素が豊富なので最初は少し困惑するかも。

記載していること以外にも多くのことができます。

サンプル・スライドショー

インストール方法

ワードプレスの管理画面から「プラグイン」→「新規追加」→「Smart Slider 3」で検索、有効化すればインストールは完了です。

「Smart Slider3」プラグインの使い方

多機能なのですべてを網羅するのは一つの記事では大変です。ということでポイントを押さえます。

2番目は、スライドショーに見えず単一の写真と勘違いされると意味がないのである程度目立たせて読者にスライドさせようという意図です。当ブログでスマホ流入が70%程度あるので、スマホでしっかり見た目を見ておく必要があります。

画像のALT属性を指定できることは必須条件です。これがないと採用できない、というくらい大事なものです。

押さえておくべき概念

ひとつひとつの写真を「スライド (Slide)」と呼び、それをまとめあがる機能を「スライドショー (Slide Show)」と呼ぶようです。

Smart Slider画面構成

▲ Smart Slider3管理画面のトップページです。「Setting」はよほど慣れてから触った方が良さそうです。

▲ インストールするとサンプルのスライダーが一つあるので選ぶとスライドショー設定画面に入ります。表示されている画像が個々のスライドということになります。

▲ スライドの下にスライドショーの設定画面があります。細かいオプション設定をここで行います。

スライドショーの作り方

新規スライドショーを作成する

それではテストに作ってみます。

▲ ダッシュボードから「New Slider」を選びます。

▲ 名前が必須項目になるのでわかりやすい名前を入れましょう。私はサイズも指定しました。投稿記事の横幅を800pxに設定しているのでそれ以上は不要なので800pxに。縦はとりあえず4:3になるようにしました。

スライドショーに写真を入れる

▲ 「ADD SLIDER（スライドを追加する）」を押して、「Image（画像）」をクリックします。

▲ 見慣れたワードプレスのメディアライブラリが表示されるので、使いたい写真を複数選びます。

写真の説明文章を入れる

説明文章は入れなくともOKですが、ALT属性を入れておくと検索エンジンの表示上有利になります。

▲ 写真を選びましょう。

▲ 「Background」に「SEO-Alt tag」があります。ここでALT属性の指定をします。この文章は読者の目には触れませんが、グーグルへのアピールになります。

▲ 「Description」が画像キャプションの設定で読者の目に触れるテキスト文章となります。

こちらは検索エンジンの評価には影響しないのでメンドウであれば飛ばすのも良し。画像キャプションについては一括で行うことも可能です。

保存してパブリッシュ

▲ 一通りの写真に説明を入れたら保存します。

▲ スライドショーの設定画面の「PUBLISH（発行）」を選ぶとショートコードが表示されています。これをコピペすれば記事内の好きな場所やウィジットにスライドショーを表示できます。

オプション設定

基本的に入れ物となるスライドショーを作って写真を放り込めばOKです。オプション設定を使うと細かい動作や見た目を制御することができます。

▲ 設定をいじったらとりあえずプレビューすることをオススメします。

前後スライドへ「ARROWS」

▲ 画像の左右スライドの表示方法の設定です。ご覧の通り細かい設定ができます。

写真の枚数を示す「BULLET」「THUMBNAIL」

読者に写真の枚数を視認しにんさせる方法は二つ。

▲ まずは「BULLET（鉄砲の玉）」画像に丸いポチを表示します。

▲ 続けて「THUMBNAILS（画像サムネイル）」です。メインの画像下に他の画像をサムネイルとして表示することができます。スライドショーとしてアピールするのに効果があるかなぁと思います。

写真の説明表示「TEXT BAR」

▲ 画像キャプションの表示設定です。表示する場所やフォントが指定できます。

スライドショーをおしゃれに「SHADOW」

▲ スライドショーの下に陰影をつけて浮かび上がらせることができます。おしゃれ効果＋これもスライドショーであることを目立たせるのに良いと思います。

便利なTips

ここからは知っておくと作業が楽になるTipsです。

クイック編集

▲ 画像のキャプション程度になりますが、一括編集ができます。

▲ 画像キャプションやリンクを付ける場合は写真一覧画面から一括して行えます。

エクスポート機能

▲ 共同でメディア管理している場合に使えそうなエクスポート機能です。HTMLのコードか、Smart Slider3独自の「.ss」という拡張子がついたファイルでエクスポートすることができます。

スライドショー複製

▲ 既存のスライドショーを複製することができます。細かいスライド動作などを指定した場合に、同じ設定で別のスライドショーを作りたいという時に便利そうです。

管理画面上部のメニューを消す

便利なTipsかどうかは微妙ですが、インストールした後にWP管理画面上部に出てくるSmart Slider3のメニューがジャマなので消しました（笑

▲ なんでこんなに主張してくるw

▲ Smart Slider3上部の「Setting」に入ります。

▲ 「Show in WordPress admin bar」のチェックをオフにしたら消えました（良かった

まとめ

こんな感じで超高機能なスライドショー・プラグインの紹介でした。

正直なところプラグインは入れたくないです。更新が止まると嫌だし、Cocoonのアップデートが早いのでそのうち実装されそうな気がします。いや、たぶんいつかｗ

ひとまずホテル記事で写真が多くなりがちなので用途を選びながら使うつもりです。