1. TOP
  2. wordpress
  3. Skitter SlideshowをWordPressで複数設置する。

Skitter SlideshowをWordPressで複数設置する。

 2013/06/07 wordpress プラグイン
この記事は約 4 分で読めます。 23 Views

先日、クライアントさんからスライドショーを設置してほしいとの相談がありました。
条件は画像をランダムに表示できる、複数のスライドショーを作る、この2点。

スライドショーはワードプレスのプラグインではいくつもあるのですが、条件に合うものはかなり少ない、
って言うか、画像をランダムに表示できるスライド・ショーはSkitter Slideshowのみです。

まずは、Skitter Slideshowのコードがどんな風になっているかチェックするために、とりあえずプラグインから作ってみます。
ユーザーインターフェースはビジュアル的に使いやすいです。

sketter

メディアライブラリに画像をアップロードして、「設定」から「Skitter Slideshow」の管理画面へ。
「Media Library」のタブで画像を選択、「more」をクリックすればスライド・ショーに画像が追加されます。

色々設定項目があるのですが、このようになっています。

Skitter Theme:スライド・ショーのテーマを選びます
Animation type:スライド・ショーの効果(アニメーションの効果)を選びます
Navigation type:ナビゲーションのタイプです。(なし、ドット、数字、サムネイルのどれか)
width px:スライド・ショーの横幅
height px:スライド・ショーの高さ
background:背景の色
crop image:画像を指定した大きさで切り取るかどうか
velocity:アニメーションの強さ
interval:画像が切り替わるタイミング(ミリ秒単位 1000なら1秒で切り替わる)
navigation:ナビゲーションの有無
numbers_align:数字をどこに表示するか(left,center,right)
label:ラベルを表示るかどうか
labelAnimation:ラベルのアニメーション効果の有無
width_label:ラベルの幅(ピクセル)
easing_default:アニメーションの進み具合(詳しくは→Easing function
animateNumberOut:マウスアウトの数字の色と背景{backgroundColor:’#000′, color:’#ccc’}
animateNumberOver:マウスホバーの数字の色と背景
animateNumberActive:数字にリンクが貼られいる場合の色と背景
hideTools:ツールを非表示にするかどうか
fullscreen:常時フルスクリーン表示にするかどうか
show_randomly:画像をランダムに表示するかどうか
enable_navigation_keys:ナビゲーションキーを許可するかどうか(?)
controls:制御ボタン(矢印)の表示、非表示
controls_position:制御ボタン(矢印)の位置(center, leftTop, rightTop, leftBottom, rightBottom)
focus:表示基準の有無
focus_position:表示基準の場所(center, leftTop, rightTop, leftBottom, rightBottom)
preview:プレビューするかどうか
stop_over:マウスホバーでスライド・ショーを止めるかどうか
with_animations:アニメーション効果を加える(’paralell’, ‘glassCube’, ‘swapBars’)
auto_play:自動的にスライド・ショーを始めるかどうか

これらの設定をしてコードがどうなっているか見ました。

これが実際のコードです。この部分を投稿や固定ページに使えるようにしたのがこちらのコード。

runphpなどのphpを使えるプラグインをインストール、有効にして、画像はテーマのimagesフォルダにアップすれば、このコードでいくつでもSkitter Slideshowを投稿や固定ページで使えます。
「class=”box_skitter” id=”wp_skitter”」ではCSSを書いてやれば、色々いじれそうです。
また、最後の方のscriptの設定を変えてやれば、スライド・ショーごとにスライド・ショーの効果などが変わります。

関連する投稿:


\ SNSでシェアしよう! /

集客特化型ホームページの制作は愛媛県の魁文堂の注目記事を受け取ろう

NO IMAGE

この記事が気に入ったら
いいね!しよう

集客特化型ホームページの制作は愛媛県の魁文堂の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

能瀬 耀

この人が書いた記事  記事一覧

  • NEC ValueStar VW770/L PC-VW770LS6R の分解修理、ハードディスク交換

  • 集客が倍増するホームページ

  • ランサムウェアのファイルを復元(RannohDecryptor.exeの使い方)

  • ホームページの集客(売り上げ)改善のポイント

関連記事

  • Google XML Sitemapsのインストールと設定

  • WordPressでECサイト(ネットショップ)

  • WP Responderを日本語化してみた…WordPressでメールマガジン、ステップメールを使う

  • Counterize IIよりCounterizeが高機能、導入、日本語化

  • Google XML Sitemaps with Multisite supportが有効化できない。

  • Google Analyticatorの設定と使い方