【Snow-Monkey】スライダーの画像をPC・SPで切り替える【簡単】

こんにちは!のせっち@nosecchi01です。

有料&優良ワードプレステーマSnow-Monkeyの虜になり、Snow-Monkeyでホームページの受託制作を始めました。

ノウハウが溜まってきたのでシェアします。

今回は、トップページのメインビジュアル(MV)を想定し、

PCでは横長・スマホでは縦長の画像を使いたい!

そんなお悩みを解消します!とても簡単です。

それでは行ってみましょう!

使用するプラグイン

使用するプラグインは下記2点です。

  • Snow Monkey Blocks
  • Snow Monkey Editor

Snow-Monkeyを使う上でこの2つのプラグインはほぼ必須なので必ずインストールしておきましょう!

ネタバレすると、手順は実にシンプルで、

  1. PC用(横長)、SP用(縦長)の画像を用意する。
  2. Snow Monkey BlocksでPC用、スマホ用2つのスライダーを用意する。
  3. Snow Monkey Editorで表示設定を調整する。

この3ステップです。

【完成イメージ】PC用・SP用画像

【PCスライダー】

【SPスライダー】

PC表示では横長、SPでは縦長になっていることがわかります。

赤背景の文字も変わっており、画像自体が切り替わっていることがわかります。
(文字部分もXDで作成し、一枚画像として書き出しています)

Snow Monkey BlocksでPC用、スマホ用2つのスライダーを用意する。

ブロックエディター → Snow Monkey Blocks【共通ブロック】 → スライダーを選択します。

ウィジェットではなく、固定ページ(投稿ページ)からSnow Monkey Blocksを使います。

理由は、Snow Monkey Blocksの方がカスタマイズが豊富で、Snow Monkey Editorとの組み合わせができるからです。

PC用・スマホ用でそれぞれ、画像を入れていく。

スライダーを選択したら、実際に画像を入れていきます。

アップロードまたは、メディアライブラリを選択し、画像を選択します。

項目を増やすには、グレーのプラスマーク(+)を選択します。

完成図はこんな感じです。

わかりにくいですが、PC用のブロック、SP用のブロックを必ず分けましょう!(重要)

画面いっぱいに広げたい場合は、配置を変更 → 全幅を選択しましょう!

Snow-Monkey Editorで表示設定を調整する。

Snow Monkey Editorのプラグインを追加すると、右側にメニューが増えているので、

表示設定(ウィンドウサイズ)で設定をしていきます。

PC用画像をセットしたブロックでは、

  • スマートフォンサイズで非表示

を選択します。

スマホ用画像をセットしたウィンドウでは、

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

を選択します。

タブレット用画像を用意する場合は、もう一つブロックを作成してください。

今回はタブレットサイズはPC用画像を使用します。

これで設定は完了です。

お疲れ様でした。

NGな設定

一つのブロックに、PC用画像、SP用画像を全ていれ、項目ごとにPC・SP画像を切り替えればいいんじゃないか?と考えた方もいるかと思いますが、それはNGです。

そうすると下記のような感じになります。

ドットインジケーターを見ると、本来はPC用(2枚)、SP用(2枚)で出し分けたいのに、4枚入ってしまっています。。

表示設定(ウィンドウサイズ)で非表示にした画像に来ると、高さゼロになってしまいます・・・。

という事で、前述の通り必ずPC用のブロック、SP用のブロックを用意しましょう!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。