カバーブロック
投稿や固定ページで 画像等のブロックスライダー をブロックエディタで作成・表示できる「ブロックスライダープラグイン」を 評価用 として期間限定(期間未定)で ベータ版を公開しました。
どなたでも無料でダウンロードしてご利用いただけます。
「ブロックスライダー」はブロック単位で画像・カバーや他のブロックも使えるようになり、高さも自動で調整する機能も付いていますので 簡単にきれいなスライダーを作る事が可能になりました。
さらに「プレビュー」機能を使って管理画面上で仕上がりの確認をしながらスライダーの調整ができるようになっています。
※「ブロックスライダープラグイン」は 将来の WordPress や 他のAPI等 のアップデート(仕様変更)によっては表示しなくなる場合がありますのでご了承ください。
※「ブロックスライダープラグイン」は WordPress5.9以降で利用してください。
※「ブロックスライダープラグイン」は Swiper を使っています。
※「ブロックスライダープラグイン」は IE11以下 では対応しておりませんのでご了承ください。
※ 作成したスライダーはAMPページでは表示しませんのでご了承ください。(AMPの仕様です)
※ すでにテーマやプラグインなどでスライダーがあるせいで不具合が生じる場合は 「ブロックスライダープラグイン」 の 利用を諦めてください。
導入方法
「ブロックスライダープラグイン」をダウンロードしてWordPressへインストールしてください。
①プラグイン新規追加をクリック
②アップロードをクリック
③「ZIP 形式のプラグインをインストール」で ダウンロード した nendeb-block-slider_XXX.zip を
選択して「いますぐインストール」をクリックしてください。
④インストールが終了したら「有効化」にしてください。
※解凍してFTPでアップロードすると不完全になる場合がありますのでお勧め致しません。
スライダー設置方法
プラグインを有効化するだけでブロック(ブロックスライダー)が利用できます。
投稿または固定ページでブロック(ブロックスライダー)を選択してください。
※メディアカテゴリにあります。
ブロックスライダー
任意のコンテンツ(主に画像)をブロックごとにスライダーで表示させることができます。
ブロックスライダーを設置すると、画像ブロックが仮設置された状態で始まりますのでここから始めてください。
スライド用のブロックは、右へ右へ と追加していきます。下のスクロールバーで移動しながら追加してください。
表示したいコンテンツを「画像ブロック」や「カバーブロック」等でスライドを作ってください。
スライドを追加する場合は 
ボタンをクリックしてください。
※画像やカバーの大きさ(幅・高さ)はブロック側で変更してもスライダー再生時に再設定されますので 設定不要です。
画像にリンクを付けたい場合は「画像ブロック」の機能で設定する事ができます。
ブロック内で任意のコンテンツを制作したい場合は グループブロック を選択してから グループブロック内 で作成してください。
グループブロック 内でブロックを追加する場合は 
ボタンをクリックしてください。
※グループブロックでの高度な設定→HTML要素では「デフォルト(div)」以外にするとスライダーが壊れますので必ず「デフォルト(div)」設定にしておいてください。wp58～
スライドの順番を変更したい場合はコンテントツールバーのムーバーボタンをクリックして移動させてください。
【注意】
ブロック作成に慣れていない場合は、まず簡単な画像ブロックだけで作ってみてください。
※任意で制作したコンテンツによっては画面幅が小さいときに見切れる場合がありますので スライダー表示設定の「高さあわせ」やグループブロック内のコンテンツで調整しください。
※自由に作れるわけではありませんのでいいところで調整してください。
「プレビュー」モード
スライダー部分(動きとかエフェクトとか)ではスライダー設定でスライドの動作や表示設定を「プレビュー」モード で確認しながら設定する事ができます。
編集状態に戻す場合は「編集」ボタンを押してください。
最後に保存する事を忘れずにしてください。
※サイトエディター内ではプレビュー機能は使えません。
もし、コンテントツールバーを見失って 編集に戻りたくてもブロックスライダーを選択できなくなった場合は 上の「リスト ビューアイコン」をクリックして表示されるリストからブロックスライダーをクリックすると選択状態になります。
スライダー表示設定
ブロックスライダーを選択している状態で右上の歯車マークをクリックするとブロックの設定画面が右側に表示されます。
スライダー表示設定
【ナビゲーションボタン】
「<(前へ)」「>(次へ)」ボタンを表示/非表示を設定します。
【ページネーション】
スライダー下部にスライド位置を表示するページ付けを設置できます。
| Pagination | 標準 |
| Dynamic | 動的なページ付け |
| Fraction | ページ数値表示 |
スライダー詳細設定
【自動でスライドが動く間隔(ms)】
スライダーを自動で動かす間隔(ms)を設定します
※自動で動かさない場合は「0」にしてください
【スライドするスピード(ms)】
スライダーを動かす速さ(ms)を設定します
【スライドの間隔(px)】
スライドとスライドの間隔(px)を設定します
【スライドエフェクト】
スライドする時の効果を設定します。
| Slide | 標準 |
| Fade | フェード効果で切替え |
| Cube | 3Dキューブで回転するスライド |
| Coverflow | 3次元効果スライドで切替え |
| Flip | 平面回転 |
【ループ】
ループ再生するかどうかを設定します。
【表示枚数】
スライダーに同時表示されるスライド枚数を設定います。
※スライダー幅が640px未満の場合は1枚になります。(モバイル用)
※ヒント※ スライドの左右を 少し前後のが見切れた状態にしたい場合は「スライド枚数」を1.2あたりで数値入力して「中央配置」にチェックを入れてみてください。
【中央配置】
現在のスライドを中央になるように設定します。
【高さあわせ】
各スライドの高さをあわせる事ができます。
①高いスライドにあわせる
②低いスライドにあわせる
③高さを指定する
※高さ(数値のみ)と単位(px,rem.em.vh)を指定してください。
④画面比率で指定する
※画面の比率を指定してください。
4：3 (スタンダード)
16：9 (ワイド)
16：10 (WXGA)
2.35:1 (シネスコ)
※スライダーの表示幅と設定次第では画像が見切れますのでそれぞれ画像の縦横比をあわせるとか、多少見切れても問題のない画像を使ってください。
※「画面比率指定」以外はページがロードされた時の高さになります。
※「画面比率指定」以外はブラウザを伸縮しても高さはそのまま維持されます。
※グループブロックで任意で制作したコンテンツによっては画面幅が小さいときに 下部分が見切れる場合がありますのでうまく調整して作ってください。
【スライダー識別用コード】
個々のスライダーを識別するコードです。スライダー新規作成時に自動で割り当てられます。
※再利用ブロックやブロックパターン、ブロックをコピーした..等でスライダーを再利用する場合は 同一ページでの重複を避ける為にユニークなコードに変更してください。
ブロックスライダープラグイン ダウンロード
Requires at least: 5.9
Tested up to: 6.0
Stable tag: 0.6.1
License: GPLv2 or later
Requires PHP: 7.4
swiper API: 8.3.2
※パスワード「nendeb」
