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

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

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

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

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

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

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

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

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

WordPressのテーマで使用するフォントなどを簡単に変更できるプラグイン「Easy Typography」

WordPressでスクロールしても常に表示されるヘッダーを作るプラグイン「Fixed And Sticky Header」

WordPressでサイトの背景に写真素材をランダム表示できるプラグイン「Nice Backgrounds」


【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の人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
WordPressセキュリティ大全 [ 吉田哲也 ]

WordPressセキュリティ大全 [ 吉田哲也 ]

2,420 円 (税込) 送料込
吉田哲也 秀和システムワードプレスセキュリティタイゼン ヨシダテツヤ 発行年月:2019年10月18日 予約締切日:2019年06月19日 ページ数:224p サイズ:単行本 ISBN:9784798058900 吉田哲也(ヨシダテツヤ) 有限会社TY Planning代表取締役。webコンサルタント・上級ウェ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報