Slider Revolution ではじめて使う場合の3つの設定方法をご紹介
ギズモードでバカな記事が出ていたので追記。
[blogcard url=https://www.gizmodo.jp/2016/04/wordpress_1.html]
コレね。Slider RevolutionとRevolution Sliderは同じプラグインです。バージョン3系の時にハックにあって4系からSlider Revolutionとなりました。んで最新は5系。
つまり、古い環境をそのまま使用しているからおこった事をプラグインのせいとしている点がバカである。
1.コンテンツソース
1.1デフォルトのスライダー
1.2外部ソース
2.スライダータイトル&ショート
スライダーのタイトルとエイリアスが定義されている場合、また、自動生成されたショートコードをコピーすることができる場所と、後でサイトのページの1つのコンテンツ領域に貼り付けます。
3.1標準スライダー
伝統的なSlider Revolution(フレックススライダーなどに該当する画像をベースにした左右にスライドするスライダーです
3.2ヒーローシーン
基本的に「ワンスライド」のスライダー。選択すると、ナビゲーション、自動再生などのマルチスライドオプション等が自動的にスライダのメイン設定から表示されなくなります。
3.3カルーセル
選択すると、新しい「カルーセル設定]セクションでセットアップできるカルーセルビューを幅広く見えるようになります。
4.1オート
4.2全横幅
4.3フルスクリーン
4.4レイヤーグリッドサイズ
例えば、あなたが「1000px」の「レイヤーグリッドの幅」で、「自動」のレイアウトを持っているとしましょう。しかし、スライダが2000pxのコンテンツコンテナの横幅を有するウェブページ、内部に配置されているとしましょう。この例では、テーマのコンテンツコンテナの幅(2000px)は文字通り、スライダの「グリッドの幅」を2倍にされているので(1000px)、スライダーのすべてのコンテンツは、200%元のサイズにスケールアップします。
それでは、あなたはは24pxのフォントサイズでテキストレイヤーを持っているとしましょう。上記のシナリオでは、テキストサイズは48pxにスケールアップとなります。
しかし、今のはスライダーが250ピクセルワイドの画面幅のモバイルデバイス上で閲覧されたとしましょう。250ピクセルのスライダーの「グリッド幅」の1/4サイズであるため、コンテンツはは24pxのフォントサイズとテキストレイヤーはその後6pxになることを意味1/4元のサイズに縮小されることになります。
今、上記のシナリオでは、6pxのフォントサイズを持つテキストは、我々は(下のスクリーンショットに示されている)「ダイナミックグリッドサイズ」を作成することを決めた理由である、目に見えて読み取るために、多くの場合、小さすぎます。基本的にこれが何をするかあなたが4つの異なる画面サイズ用のコンテンツをスタイルすることができますです。たとえば、代わりに上記のシナリオで説明するデフォルトサイズ変更動作のため、あなたは、具体的にははるかに良いテキスト可読性の経験を可能にする、16pxになるように、「タブレット」のフォントサイズを設定することができます。
これについて考えるための簡単な方法は、CSSメディアクエリのメディアクエリ内の「最大幅」は、以下の画面のオプションで「グリッド幅」になりそれを比較するして選択する必要があります。
4.5.1詳細オプション「自動」と「全幅」のため
- オーバーフロー隠し – カルーセルスライダーに便利です。そうでなければ、あなたがメインスライダーの外側に配置されています任意のコンテンツを持っている場合は、この「オフ」を残します。
- アスペクト比を尊重 – 「レイヤーグリッド」の高さは、基本的にスライダの「最大高さ」として機能します。しかし、「オン」スライダの高さがこの値を超えて拡大することを可能にするために「尊重アスペクト比」オプションを設定する(効果的にスライダの「最大高さ」を無効にします)。
- 高さを自動調整 – スライダーの高さが短くても自動でフィットさせて広くすることができます。スライダーがダウンサイズされたとき、、短い高さが短すぎることがあります。これらのケースでは、「最小の高さ」の値を適用すると、その下にサイズが変更されたときにスライダーが決して短くなりすぎないようにします。
4.5.2詳細オプション「フルスクリーン」のために
- 1.フルスクリーン揃えを強制 – 必ず事前に定義された「レイヤーグリッド」サイズとは対照的に、(画面サイズに応じて可変である)実際のスライダのサイズに基づいてコンテンツレイヤーを整列させます。
- 2.コンテナ – あなたのページのヘッダメニューとフッターの間で「フルスクリーン」スライダーを配置するための有用な(一般的な例についてはスクリーンショットに注釈を参照してください)。
- 3. PXまたは% – ピクセルまたはパーセンテージの特定の量によって、スライダーの高さを調整します。
- 4.高さの自動調整 – スライダーの高さがこの数を下回ることはないことを確認して、あなたのフルスクリーンのスライダーをピクセル単位で最小の高さを適用して最適化します。
Slider Revolutionは基本やはり英語なのでドキュメントも英語です。
だからドキュメントを整理して日本語化して公開している、自分の備忘録となります。