「スライダー」の使用例【Snow Monkey Blocks】

スライダーの見本

スライダーブロックは、その名の通り画像をスライドさせるブロックです。

トップページにスライダーを追加したい人や、商品紹介をスライドで見せたいときにおすすめです。

初めてWordPressを触った人も最初に作ってみたいのはスライダーではないでしょうか。

魅力的な画像を美しいスライダーとして表示します。

仕様

設定項目は沢山あります。(2019/11/05現在)

幅の設定

マウスを動かしながら、クリックできる場所を探してください。

幅広は標準の幅です。

トップページに最適! 全幅が選択できます。
トップページ画像にする場合は1920px幅にしています。

ドットインジケータを表示する

ドットの表示です。
白がOFF、青がONです。

オシャレですね。スライドが何枚あるか直感的に分かります。

前/次の矢印

矢印ボタンの表示、非表示を設定できます。
設置することで、スライダーだと認識できます。
ボタンを押すことで、次のスライド画像にスライドします。

スライドアニメーション速度

100ミリ秒は1秒です。

自動再生の間隔

自動再生されるまでの時間です。
こちらの単位は(秒)です。

フェードを有効にする

じわ~っと切り替わるやつです。
お客様の要望は多いです。フェードという言葉で通じないことが多いです。

スライダーの方向を右から左に変更

通常は左から右にスライドする機能を、右から左に変更します。

表示するスライド数/スクロールするスライド数

「スライダー」の使用例

例:正方形でスライドさせてみた

設定:スライドアニメーション700ミリ秒、ドットインジケータON,前/次の矢印ONフェードOFF

例:全幅(画像サイズ1920px×500px)、フェード、自動再生3秒

ポイント:写真サイズを合わせる

利用したサイトご紹介

随時更新します

この記事を書いた人

山崎 大祐

現役コーダーでフロントエンジン寄りのWeb構築と運用ができます。(企画/デザイン/構築/運営)
すきなもの「赤色・キューブ・コンクリート」