スライダーの設置方法とレスポンシブ対応【Snow Monkey Blocks】

こんにちは、WebデザイナーのKazumiです。

Snow Monkeyでサイトにスライダーを設置したいけど、どうやれば良いのかわからない…

と悩んでいませんか?

そんな方に向けて、この記事ではWordPressのSnow Monkey Blocksを使用した簡単なスライダーの設置方法と、PC・スマホ表示の最適化方法について紹介しています。

レスポンシブ対応スライダーの設置方法【Snow Monkey Blocks】

・サイトのトップページやフッターで複数の画像をスライドさせたい
・スライダーの設定方法がわからない
・PCでもスマホでもキレイに見えるようにしたい

本記事で紹介する方法を実践すれば、PCでもスマホでもキレイに表示されるレスポンシブ対応のスライダーを設置できますよ!

例えばこちらのスライダー。PCでもスマホでも、見やすいように画像サイズを調整しています。

▲PC画面での見え方
▲スマホ画面での見え方

このように、実際の見え方もご紹介しながらわかりやすく解説します。
記事前半ではスライダーの設置方法について、後半ではレスポンシブ対応の方法について解説しますのでぜひ最後までご覧ください。

Snow Monkeyのスライダー設置方法

まずはSnow Monkey Blocksのスライダーを設置して、設定してみましょう!

「スライダー」のブロックを配置する

スライダーを設置したい箇所の黒い「+」アイコンをクリック→「すべて表示」、もしくはページ左上の青い「+」アイコンをクリックして、ブロック一覧を表示します。

▲ブロック一覧

「Snow Monkey Blocks」から「スライダー」を探します。検索窓に「スライダー」と入力してもOKです。
Snow Monkey Blocksの赤いアイコンを選択してください。

▲赤いスライダーブロックを選択

これでスライダーブロックが設置できました。

用意した複数の画像をアップロードして設定する

次に、スライダーに使用したい画像を設定していきます。

「メディアライブラリ」を選択して、アップロードされた画像の一覧に移動します。まとめてドラッグ&ドロップでアップロードできますので、まだ画像をアップロードしていないという方はここでアップロードしてください。

メディアライブラリから、スライダーに表示させたい画像を選択します。
画像は複数選択できます。チェックを入れた順番通りに表示されますので、表示させたい順番で選択しましょう。

これでスライダーの設置は完了しました!プレビューで確認してみましょう。

必要に応じて表示設定を変更する

スライダーの設置が完了したら、編集画面からスライダーブロックの設定を確認してみましょう。

スライドの左右に矢印を表示させたり、スライダーの下に画像枚数のドットやサムネイルを表示させたり、自動再生の時間を設定したりできます。

▲スライダー設定

ここでは「矢印を表示」「ドットを表示」「フェード」(画像の切り替えにふわっとした動きをつける)を設定しました。
すると下記のように表示されます。

これでスライダーの設置は完了しました!

スライダーをスマホ表示でもキレイに見せる方法(レスポンシブ設定)

前述のステップでスライダーの設置は無事完了しましたが、横長の画像を設定している場合、スマホの表示では画像が小さくなってしまっていると思います。

▲スマホだと画像が小さい…?

ここからは、「スマホでも見やすいように大きく表示させたい!」という方のために、簡単なレスポンシブ対応の設定方法について解説します。

スマホ表示用に画像サイズを調整する

まず、スマホで見やすく表示するためには縦長の画像を用意する必要があります。
PC用スライダーに設定していた横長の画像を、スマホ用にリサイズしましょう。

リサイズに使用するツールは使いやすいものでOKです。
WordPressのメディアライブラリ上でもリサイズ(切り取り)できるので、今回はその方法で進めていきます。

ダッシュボードからメディアライブラリを開きます。
PC用と同じ画像を編集してしまうと上書きされるので、再度同じ画像をアップロードして複製してから編集します。

編集したい画像を開いて「画像を編集」ボタンをクリックします。

編集画面に切り替わるので、左上の「切り抜き」を選択。

画像のふちに表示されている点線を動かして、切り抜き範囲を指定します。右側に選択範囲を手入力することもできます。
スライダー内の画像サイズは同じにした方がキレイに表示されるので、点線でざっくり切り抜き範囲を決めてから、サイズを手入力して微調整するのがおすすめです。

今回スマホ用のサイズにしたいので、縦長の画像になるように調整しています。
切り抜き範囲が決まったら、再度右上の「切り抜き」を選択します。

これでリサイズ完了です!忘れずに保存しておきます。
他の画像も同じようにリサイズしていきましょう。先述の通り、一つのスライダーに表示させる画像は同じサイズにすることをおすすめします。

「スマホ表示用」のスライダーブロックを新たに作成する

画像が用意できたら、スライダーを表示させたいページの編集画面に戻ります。
既に設置しているスライダーの下に、もう一つスライダーブロックを設置しましょう。設置しているスライダーブロックを複製してもOKです。

メディアライブラリから用意したスマホ用サイズの画像を選び、設定します。
スライダーブロックを複製した場合は、PC用画像からスマホ用画像に置換します。

これでスマホ表示用のスライダーブロックが完成しました!

「PC表示用」と「スマホ表示用」で表示設定を変更する

次に、レスポンシブ表示の設定をしていきます。
ここまでのステップで、編集画面ではPC用画像のスライダーと、スマホ用画像のスライダーの二つが並んだ状態になっていると思います。

PC用画像のスライダーブロックを選択し、右側の設定メニューから「表示設定(ウィンドウサイズ)」を開きます。

▲スマホサイズでのみ非表示

ここをオンオフすることで、スマートフォンサイズ、タブレットサイズ、PCサイズの表示・非表示を設定できます。
「スマートフォンサイズで非表示」をオンにします。これで該当のスライダーブロックはPCとタブレットにのみ表示されるようになりました。

次に、スマホ表示用のスライダーブロックを選択し、今度は「タブレットサイズで非表示」「PCサイズで非表示」をオンにします。

▲タブレットサイズとPCサイズで非表示

これでレスポンシブ表示の設定が完了しました。一度保存して、確認してみてください。
PCでもスマホでも、画面サイズに合ったスライダーのみが表示されているはずです!

スライダーの設置方法とレスポンシブ対応【Snow Monkey Blocks】 まとめ

今回はSnow Monkey Blocksでのスライダー設置方法と、PC表示とスマホ表示で最適化する方法を解説しました。
スマホ用に画像をリサイズするのは少し手間かもしれませんが、これが一番簡単にキレイに表示させる方法だと思います。

ウィンドウサイズの表示設定は、ワンタッチでレスポンシブ設定ができるとても便利な設定です。

このブロック、PCではうまく表示されてるけど、スマホだとレイアウトが崩れてしまう…

そんなときは、

PC表示用とスマホ表示用のブロックを作成して、ウィンドウサイズの表示設定を変更しましょう!

場合によってはスマホ用、タブレット用、PC用で3つ作って分けて表示させる、なんてことも可能です。
スライダーだけでなく、色々試してみてくださいね。

この記事を書いた人

Kazumi

フリーランスWebデザイナーです。画像加工や動画編集、アニメ制作もしています。時間と場所に縛られない自由な生活を手に入れるためにスキルを磨いています!ブログでは学んだことのアウトプットをメインに役立つ知識を発信しています。