Meteor Slides複数実装のアレコレ

先日の複数のスライドショーをどうやって設置するか?でなくてもグーグル先生にはお世話になりっぱなしなんですが、日本語化って難しいですね。

Contact Form 7もそうなんですが、
とりあえず設定できればOK!

ここのソースは判ってるだろうから省略するね!
のどちらかしかない気がします。
Contact Form 7もデザインをカスタマイズしたいんですけど、こちらも20分くらいムダに検索しました。
そして力尽きました。
XHTMLとCSSは知ってるけどPHPは知らない私みたいなのは、知識が中途半端なんでしょうね。

同じキーワードで何度も検索を繰り返し、解説してるっぽいサイトだけを見たんですけど、ITパスポートの先生ありがとう!って思いました。(私が唯一持ってる情報系資格です
そんな検索!検索!の繰り返しの中でもMeteor Slidesでスライドショーごとに違う画像を表示させる方法が探し出せず、あろうことか
「1種類のみ」
と書いている方を見つけたりして(デザイナーさん?)、嘘はイカンと思いました。

アフィリエイターさんやまとめサイトさんは紹介と、基本的な(あるいはアフィリエイトサイトに適した)解説でしょうし、
プロアマ問わずプログラマ系の方は、ソースのどこを変えるかといった解説でしょう。
しかし写真やグラフィックデザイン、イラストを効果的に発表したいデザイン系の人はやっぱりデザインに力を入れるので、私が知る限りでは「デザインにあったカスタマイズ」に注目してる人が多いです。
設置だけではデザイン的に満足できないので、プログラムの知識が多少あるから、ググって調べる。

という訳で20分くらい検索してから本家をgoogle翻訳して5分くらい読んだあと5分くらいで複数のスライドショーが実装できたMeteor Slidesですが、
アフィリエイターの皆さんは、一ヶ所(主にヘッダー画像)に一種類のスライドショーで満足されているご様子…
(個人的には情報サイトでヘッダにスライドショーみたいな変化があるのは落ち着かないんですが)
しかしポートフォリオ的な使い方をする場合、それぞれのコンテンツやカテゴリに合った画像のみを表示したいと思うはず。
たとえば、
春の写真のギャラリーページのアイキャッチ代わりに使う、春の写真のみのスライドショー
月別の写真をまとめたスライドショー
地域別の写真をまとめたスライドショー

を同一サイトに設置したい、という感じです。
実は複数実装されてる方も見つけましたが、そういう人に限って解説はないんですよ。
つまり「簡単」だということなんですよね。
実際「簡単」でしたしね。
なので設定方法を解説しているサイトもあると思うんですが、グーグル先生がまだ見つけてないか、必要ないから検索上位に入らないか、私の探し方が悪かった、のどれかなんでしょうね。

あと、これもあんまり需要ない話だと思うんですけど、スライドショーに表示される順番は、新しく追加したスライドからです。
表示順を決めている場合は、
表示順とは逆(最後に表示したい画像を最初に、最初に表示したい画像を最後)に追加するか、
phpを書き換えるか、
本家によると「スライドの公開日を変えるか、Post Types Orderが便利だよ(意訳)」
のどれかみたいです。
phpの書き換えはアップデートの際に上書きされて消えてしまう可能性があるので、素直に製作者の指示に従った方が安全かつ簡単だと思います。

それと一度作ったスライドはその時の設定サイズで作られているので、後から設定したサイズにリサイズされません。
なので、スライド画像を削除して改めて設定サイズで作り直す必要があります。
ここでもグーグル先生のお世話になったんですが、コチラは出てきましたよ。
iTheme2に合うレスポンシブデザインなスライドショー
本家にも同じことを質問してる方がいて、製作者が丁寧に答えてました。
ヘッダ画像に使う場合はサイズが決まってるから、一度上げたスライドのサイズを変更する事なんてないでしょうからね。
私は縦横比率と表示される画像の範囲を確認しながら設定したため、複数のサイズで構成されたスライドショーが出来上がりました。

コレ、わざと使えばサイズがだんだん変化していくスライドショーが作れると思うんですけど、本家の翻訳読んだらそういう使い方は想定されてないみたいでした。
サイズの違う画像を使う場合はメタデータ使ってね(意訳)
みたいな解説されてましたので、正しい使い方じゃないでしょうね。

八重桜

八重桜が咲き始めました

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク