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

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のプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

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

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

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

設定はダッシュボードの「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
【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

258 円 (税込) 送料込
◆◆◆ディスク有。中古商品のためキズ、日焼け、使用感等ある場合が御座いますが概ね良好な状態になります。迅速・丁寧な発送を心がけております。【毎日発送】商品状態著者名:エ・ビスコム・テック・ラボ発行者:ソシム発売日2010年09月
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る