Fusion Sliderでは、以下の4つを背景にしたスライドを作成することができます。
- 画像
- サイトに直接アップロードする動画(WebMやMP4)
- YouTube
- Vimeo
このコンテンツでは、1の画像スライドオプションと全スライド共通オプションについて解説しています。
全スライド共通オプションは次の2つのセクションになります。
【3.Slider Content Settings / スライダーコンテンツ設定】
【4.Slide Link Settings / スライドリンク設定】
動画スライドオプション【Fusion Slides 動画スライド】、スライダーオプション【Fusion Slider スライダーオプション】の解説も合わせてご覧ください。
3.Slider Content Settings / スライダーコンテンツ設定
このセクションでは、スライド内に表示するコンテンツに関するオプションを解説しています。
このオプションを使用することで簡単にスライド内にテキストを表示させることができます。
また、プレーンテキストだけでなくhtmlタグやショートコードを使用することもできます。
見出しとキャプションは、オプション内容が同じなのでまとめて解説しています。
冒頭でもお伝えした通り、これ以降は画像スライド・動画スライド共通のオプションになります。
3-1 Content Alignment / コンテンツの位置
このオプションは、見出し・キャプション・ボタンの揃え位置を、Left(左)・Center(中央)・Right(右)のいずれかに設定することができます。
またCenter(中央)を選択すると、見出しとキャプションの設定にそれぞれ【3-7 Separator】の設定項目が表示されます。
3-2 Heading Area・Caption Area / 見出し・キャプションエリア
このオプションは、見出しまたはキャプションエリアに表示されるテキストを設定することができます。
このフィールド内はプレーンテキストだけでなく、HTMLやショートコードも使用することができます。
3-3 Font Size / フォントサイズ
このオプションは、見出しまたはキャプションのフォントサイズを設定することができます。
注意点としては、px抜きの値を入力しましょう。
例
50 = ○
50px = × となります。
3-4 Heading Color・Caption Color / 見出し・キャプションカラー
このオプションは、見出しまたはキャプションのフォントカラーを設定することができます。
3-5 Background / 背景
このオプションを有効にすると、見出しまたはキャプションの背景を透明に表示させることができます。
背景を表示させる場合は、【3-7 Heading・Caption Separator / セパレーター】が無効になります。
3-6 Background Color / 背景色
このオプションは、【3-5 Background / 背景】を有効にしている場合に、見出しまたはキャプションの背景色を設定することができます。背景は半透明に自動で変換されます。
例
#009fe6で設定した場合、rgba(0,159,230,0.5)になります。
3-7 Heading・Caption Separator / セパレーター
このオプションは、【3-1 Content Alignment / コンテンツの位置】でCenter(中央)を選択している場合に有効となるオプションで、セパレータを10種の中から選択することができます。
セパレータとなるボーダーカラーはフォントで設定したものが使用されます。
太さや色を変更したい場合は、スライダーを使用するページ内のCSSを以下を参考に変更しましょう。
4.Slide Link Settings / スライドリンク設定
このオプションは、スライドにボタンリンクまたはスライド全体をリンクとすることができます。
選択するリンクタイプによって表示されるオプションが変化します。
4-1 Button #1 Button #2
このオプションは、リンクをボタンとした場合のオプションで、ボタンのショートコードを挿入することで、スライドにボタンを表示することができます。ボタンはそれぞれのエリアにショートコードを挿入することで、最大2つ表示させることができます。
ショートコードの簡単な生成方法は以下の手順で生成すると簡単です。
- 投稿または固定ページのエレメントにテキストブロックを選択
- Fusion Themeアイコンをクリック
- ショートコード一覧から【Button(ボタン)】を選択
- 必要な項目を入力
- INSERT(挿入)をクリック
これでショートコードが生成されるのでコピペしましょう。
ボタンのショートコードについては、公式サイトのButton Elementに詳細が記載してあるのでそちらも参照するといいでしょう。
Fusion Slider Images Demoは、ボタンリンクを使用しています。
4-2 Slide Link / リンク先
このオプションは、リンクタイプで【Full Slide(スライド全体)】を選択したい場合に有効となるオプションで、スライドをクリックした時のリンク先URLを設定することができます。
Fusion Slider Movies Demoの2枚目【Vimeo】を使用したスライドは、スライド全体がリンクになっています。
4-3 Open Slide Link In New Window / 新しいウインドウで開く
このオプションを有効にすると、【4-2 Slide Link / リンク先】でURLを設定した場合に、リンク先を新しいウィンドウで開くことができます。
コメントする