【SANGO スライダーブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO コードボックスブロック】について解説していきます。

以下の記事で紹介されているようにトップページなどで注目を引きたい場合などに使用するのがお勧めです。

サンプル例

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGOスライダーブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO スライダー」と書かれたブロックを選択します。

各種設定項目

ドットナビゲーションを表示

スライダー下にドットナビゲーションを表示します。

この部分がドットナビゲーションにあたります。

最後までスライドした後に最初のスライドに戻る

スライダーを最後までスライドした時に最初の画像までスライドします。

スライダーを自動切り替えする

スライダーを何秒かごとに自動で次のスライドに切り替えます。

スライドごとにリンクを設定する

スライドをクリックした際に好きなURLに遷移させることができます。

このチェックボックスをONにするとそれぞれのスライドに対して遷移先のURLとリンクをクリックした際に別タブで開くかどうかが設定できます。

スライドの高さを設定する

スライドの高さを設定することができます。高さはpx指定もしくは%指定を選ぶことができます。%指定をしておけばスマートフォン、PCに限らず最適なサイズで表示されるのでお勧めです。

スライドの表示数を設定する

同時に表示するスライド数を設定できます。例えばスライドを10枚設定していたとしても「同時に表示するスライド数」を3にしておくと一度に画面に表示されるスライド数は3枚になります。

また、モバイルの際は画面サイズが小さいため一度に表示すると一つ一つのスライドが小さくなりすぎる場合があります。そういった場合は、「モバイルの場合は一枚ずつ表示する」にチェックを入れます。

ブロック下のマージン

スライダーブロックの下にコンテンツを配置するとブロック間の距離が短くパツパツに見えてしまうことがあります。そういった場合はブロック下にマージンを設定しましょう。

0 ~ 10emの間で設定することができます。

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。