iTheme2に合うレスポンシブデザインなスライドショー

Check

お絵かきＢＢＳに描いてくれた絵をスライドショーにして公開しようとがんばってみました。
現在マッスルモバイルに追加されているスライドショーは「Meteor Slides」Wordpressのプラグインです。

当初はCamera slideshowを採用するつもりだったのですがどうやっても動作せず、プラグイン内の新規追加、slideshowで検索かけて良さそうだったMeteor Slidesを導入することになりました。

使っているブログテーマのiTheme2がレスポンシブデザイン、リキッドデザインと呼ばれる画面幅で可変するタイプなので選べるものが結構限られてきます。

Meteor Slidesの動作はこんな感じ↓
（いずれ別のものに乗り換えしてスライドショーが見れなくなるかもしれません）

記事内：[meteor_slideshow]
プログラム内：<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>

上のは記事内のショートコードを書き込んでいます。このソフトは簡単かつ親切な作りでプラグインをインストールすると追加されるメニュー内Slidesのsettingにもコードが書いてあるので忘れても安心です。

手順は　　プラグインインストール、有効化、メニュー内Slidesに画像追加（Wordpress標準の記事投稿に準拠していますので簡単です）、コードを記事かプログラムに書き込み。　　これだけで動きます。いくつか試して挫折したものも多いですがこのプラグインの導入は本当に簡単でした。メニューは英語ですが項目自体が少ないので何とかなると思います。

このプラグインの難点を既にいくつか見つけていまして「規定した投稿枚数の投稿画像がないとスライドショーが表示されない」「画像サイズ変更は投稿済みの画像には適用されない（アイキャッチ画像を削除し再設定必要）」「スマートフォンのスワイプでスライドショーの画像切り替えができるが、それによってスライドショー上でタッチによるページ送りができなくなる」などなど注意してください。特に投稿画像が足りていないと動かない、初期設定では５枚投稿しないといけません。

<div style="margin-right:100px">[meteor_slideshow]</div>

ページ送り用のスワイプスペース確保やらサイズ調整にはこんな感じのdivコードでマージン（余白）を空けるのが便利です。iTheme2で自分は多用しています。

以下、参考にしたサイトの覚書です。
・HTML数値文字参照変換
・8 Responsive jQuery Slider Plugins
・レスポンシブWebデザイン対応のjQueryイメージスライダーのWordPressプラグイン版「Responsive Slider Plugin With FlexSlider for WordPress」

Google AdSense