Slider Revolution ではじめて使う場合の3つの設定方法をご紹介

ギズモードでバカな記事が出ていたので追記。
[blogcard url=https://www.gizmodo.jp/2016/04/wordpress_1.html]
コレね。Slider RevolutionとRevolution Sliderは同じプラグインです。バージョン3系の時にハックにあって4系からSlider Revolutionとなりました。んで最新は5系。
つまり、古い環境をそのまま使用しているからおこった事をプラグインのせいとしている点がバカである。

1.コンテンツソース

 Slider Revolutionの主な設定を調整するには、以下のスクリーンショットに示すように、新しいスライダーを作成した後、「設定の編集」ボタンを選択します。
slider-settings
次に、あなたのスライダのコンテンツソースを選択するオプションがあります。「デフォルトスライダー」は、「デフォルト」で選択されますが、以下に説明するように、あなたの中から選択することができますいくつかの追加オプションがあります。
content-source

1.1デフォルトのスライダー

通常のスライドを作成し、個別に管理されているあなたのWordPressのメディアライブラリからの画像kらスライダーを作成します。

1.2外部ソース

「外部ソース」は、他のすべてのソースオプション(投稿ベーススライダー、FlickrやYouTube、等)になります。これらの追加のオプションの設定について学ぶために以下のリンクをクリックしてください。

2.スライダータイトル&ショート

スライダーのタイトルとエイリアスが定義されている場合、また、自動生成されたショートコードをコピーすることができる場所と、後でサイトのページの1つのコンテンツ領域に貼り付けます。

  • エイリアス命名:
    スライダーの”タイトル”は何でもすることができますが、「エイリアス」は、任意の特殊文字やスペースを持つべきではない(ただし、ハイフンとアンダースコアはOKです)

slider-title-alias-2

3.スライダタイプ

slider-type-options

3.1標準スライダー

伝統的なSlider Revolution(フレックススライダーなどに該当する画像をベースにした左右にスライドするスライダーです

3.2ヒーローシーン

基本的に「ワンスライド」のスライダー。選択すると、ナビゲーション、自動再生などのマルチスライドオプション等が自動的にスライダのメイン設定から表示されなくなります。

3.3カルーセル

carousel-settings

 3.4プリセット設定

 あなたの現在のスライダーの設定のプリセットテンプレートを読み込む、または将来のスライダーに使用するプリセットをテンプレートとして、スライダーの現在選択されている設定を保存します。
 settings-presets

4.スライダーレイアウト

slider-layout

4.1オート

デフォルトの「レスポンシブ」レイアウト。スライダーは常にそれがあなたのテーマのページレイアウトの内側にシームレスにフィットすることができ、その直接のHTMLコンテナの幅を継承します。
レスポンシブに標準で対応しているので自動でモバイルにも対応してるスライダーとなります。

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メディアクエリのメディアクエリ内の「最大幅」は、以下の画面のオプションで「グリッド幅」になりそれを比較するして選択する必要があります。

layers-grid-size
複数の画面サイズのコンテンツを設計する能力を有効にするには、最初に「カスタムグリッドサイズ」を設定する必要がありますに上記のスクリーンショットに示すように、「オン」。

そして、あなたがスライドを編集するとき、あなたはそれぞれの有効「カスタムグリッドサイズ」のために(例えば、様々なフォントサイズなど)異なるスタイルを設定することができ、少なくとも一つの「カスタムグリッド・サイズ」をアクティブ化します。

switch-viewports
4.5高度なオプション
高度なレイアウトオプションについては、「[高度なサイズオプション」ボタンをクリックします。
layout-advanced-options

4.5.1詳細オプション「自動」と「全幅」のため

advanced-options-1
  • オーバーフロー隠し – カルーセルスライダーに便利です。そうでなければ、あなたがメインスライダーの外側に配置されています任意のコンテンツを持っている場合は、この「オフ」を残します。
  • アスペクト比を尊重 – 「レイヤーグリッド」の高さは、基本的にスライダの「最大高さ」として機能します。しかし、「オン」スライダの高さがこの値を超えて拡大することを可能にするために「尊重アスペクト比」オプションを設定する(効果的にスライダの「最大高さ」を無効にします)。
  • 高さを自動調整 – スライダーの高さが短くても自動でフィットさせて広くすることができます。スライダーがダウンサイズされたとき、、短い高さが短すぎることがあります。これらのケースでは、「最小の高さ」の値を適用すると、その下にサイズが変更されたときにスライダーが決して短くなりすぎないようにします。

4.5.2詳細オプション「フルスクリーン」のために

advanced-options-2
  • 1.フルスクリーン揃えを強制 – 必ず事前に定義された「レイヤーグリッド」サイズとは対照的に、(画面サイズに応じて可変である)実際のスライダのサイズに基づいてコンテンツレイヤーを整列させます。
  • 2.コンテナ – あなたのページのヘッダメニューとフッターの間で「フルスクリーン」スライダーを配置するための有用な(一般的な例についてはスクリーンショットに注釈を参照してください)。
  • 3. PXまたは% – ピクセルまたはパーセンテージの特定の量によって、スライダーの高さを調整します。
  • 4.高さの自動調整 – スライダーの高さがこの数を下回ることはないことを確認して、あなたのフルスクリーンのスライダーをピクセル単位で最小の高さを適用して最適化します。

Slider Revolutionは基本やはり英語なのでドキュメントも英語です。

だからドキュメントを整理して日本語化して公開している、自分の備忘録となります。



一番上へスクロールするボタンを有効または無効にする