WordPressで背景にフェードイン/アウトする複数の画像を表示できるプラグイン「Unlimited Background Slider」

公開日: 更新日: デザイン
Knowledge Base デザイン




Wordpressには無料で配布されているテーマがたくさんあるものの、サイト表示を行うパーツとして「ヘッダー」「本文」「サイドバー」「フッター」という4つの要素で構成されていることには変わりがないのでなかなか個性的なサイト作りは難しいもの。

唯一といっていい個性を出すための仕掛けである背景色や背景画像も皆さんやられてますからあまり個性にならないですね。

「Unlimited Background Slider」はサイトの雰囲気を出す上で重要な背景画像を複数設定し、フェードイン/フェードアウトさせながら一定時間毎にどんどん入れ替えることができるプラグインです。

【Unlimited Background Slider】プラグインの基本的な機能・できること

  1. 複数の背景画像を持つスライダーを設定可能
  2. 複数のスライダーを設定して切替が可能

有料版では画像入れ替え時の動作(無料版ではフェードイン/アウトのみ)の選択ができるようになったり、より細かくどのシーンでどのスライダーを使うのかを設定できたりするようですが、個人的には無料版で充分だと思います。

あまり大きいサイズの画像を使用するとサーバーに負荷がかかったり、サイト表示が遅くなったりする原因になりますので注意が必要です

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Unlimited Background Slider】プラグインの設定画面や表示の日本語化と翻訳

【Unlimited Background Slider】プラグインは設定項目が少ないので特に必要ないと思います

【Unlimited Background Slider】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【設定画面のスクリーンショット】

設定はダッシュボードの「Background Slider」から行います。↑の画面は新規追加または編集時の画面です。
設定はいくつかありますので実際の画面を見ながら調整するのがいいと思います。

  1. Add image(s)をクリックして背景にする画像をメディアから選択します(アップロードもできます)
  2. Slide Duration/1つの画像を表示し続ける時間を設定します
  3. Transition Speed/画像の入れ替えを行う時間(前画像をフェードアウトし、後画像のフェードインが終わるまでの時間)を設定します
  4. Show Navigation/画像を手動で入れ替えるためのナビゲーションを表示するかどうかの選択です

【Unlimited Background Slider】プラグインの基本的な使い方

編集画面右側の「Assign Background Slider」の項目で背景表示をするシーンを選択します(複数選択可)。
Pages/固定ページ
Posts/投稿
Home Page/トップページ
Blog Page/ブログページ
Custom Taxonomies/Taxonomies/Custom Post-Types/カスタム投稿タイプやカスタムタクソノミー
Tags/タグアーカイブページ
Date Archive/日付アーカイブページ
Author Page/作者アーカイブページ
Search Page/検索結果一覧

※複数のスライダーを設定しておいて、切替ができるようにはなっていますが、テスト環境では上手く動作しませんでした。スライダーの一覧で最上位にある(あいうえお順が一番若い)ものが使われるようです

※複数あるスライダーを入れ替えるには、

  1. 使用しないスライダーの表示チェックをすべて外した上で名前を変更し、使用するスライダーの表示チェックを入れる
  2. 使用するスライダー以外は全て「下書き」にする

という2つの方法がありましたが、1はとても面倒なので2をおすすめします。2の方法では表示を行う場面すべてにチェックを入れた状態のまま一覧のクイック編集から「公開済み」と「下書き」を切り替えるだけでスライダーの使い分けができます。

サンプル表示しているサイト

サンプルとして2016年10月現在

で使用しています。都合により閲覧時には使用していない場合があります。ご了承ください。

【Unlimited Background Slider】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

IE(インターネットエクスプローラー)では上手にフェードしない

普段はGoogle Chromeを使っているので気づかなかったのですが、たまたまIEを使う機会があったので確認してみたところ、フェードが効かずにパッと画面が変わる感じになっていました。

サイトを閲覧される環境は様々なので何とも言えないですが、IEの後継であるEDGEではうまくフェードしてくれたので、IE特有の問題だと思います。使用する場合、今後IEはなくなっていくので仕方ないと割り切る必要があります。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】