• かちびと.net

    jQueryによる背景のスライドショーを手軽に実装出来るWordPressプラグイン・Site Background Sliderのご紹介。背景にいっぱいに画像を広げてスライドショーにしてくれます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQueryによる背景のスライドショーを手軽に実装出来るWordPressプラグイン・Site Background Slider

スポンサーリンク

Webサイトの背景に画像をいっぱいに
広げて、jQueryでスライドショー化、
というのを手軽に実装出来るWordPress
のプラグインです。jQueryとWPでよく
困ってる方を見かけますのでプラグイン
に頼るのも手かなと思います。

WordPressでjQueryを使う、という方で結構困っている方が多いので、以前傾向と対策的な記事を書いたのですが、プログラマーじゃないから難しい、という方はプラグインに頼ってみては如何でしょう。

Site Background Slider


こんな感じで簡単に背景を素敵なスライドショーにする事が出来ます。背景は常にいっぱいに広がってくれます。キャプチャじゃ分かりませんけど画像が切り替わります。

プラグイン配布先でデモがありましたのでご覧下さい。

Demo

フードやファッションサイトなど、トレンドに関係が深いコンテンツと相性良さそうですね。写真で訴求力を高めたい時に有効な手段だと思います。

インストール

  1. Site Background Sliderを解凍
  2. wp-content/plugins/内にアップロード
  3. 管理画面で有効化
  4. 各種設定

或いは管理画面で検索してインストールしてください。

設定


設定項目です。1番上はオーバーレイに使用するpng画像の設定。15種類ほどあります。あとは書いてあるとおり。画像フォルダは任意で作成し、その中にスライドさせたい画像を入れれば良いだけ。

僕はwp-content/slider/というフォルダを作ってその中に画像を入れました。この場合、「画像の格納フォルダ」の指定は「wp-content/slider/」と設定すればOKです。

その他の設定は以下の通り。

  1. Include jQuery library framework //このプラグインを使うかどうか
  2. Show the image overlay //オーバーレイ画像を使うかどうか
  3. Show the loading icon //ローディングアイコンは表示させるかどうか
  4. Random (Shuffle) Images //ランダム表示
  5. Show Press Pixels Link //このプラグイン作者のリンクを表示させるかどうか

リリース情報は以下になります。テーマファイルも触らないで済むので楽でいいですね。ページ単位で写真選べるともっと色々出来そうですけど。今後に期待しましょう。

via:Press Pixels

URL :
TRB :

Comments & Trackbacks (5)

  1. Press Pixels

    Thanks for the review ;) I wrote this in english, hope its not a problem…

    Glad you like our background slider plugin, we are adding some new features and a pro version soon!

    • シロ

      My pleasure:)

      HAHA, no problem. Thx for your kindness!

      I’m looking forward to your plugin ;D

  2. Nobu

    いつも参考にしております。site background sliderを入れPCやipadで確認したところうまくいっていたのですが、iphone4や5で見ると画像が下1cmくらいのところで切れてしまいます。解決策あれば教えてください。

    • シロ

      こんにちは。公式のデモで確認しましたが、当方の環境では仰る事象は確認出来ませんでした。

      CSS、または画像を再度ご確認なさってみてください。
      例えば、背景の画像を画面サイズに応じて縮小している場合、画像の高さが無ければ空白になります。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services