WordPressにスマホ用とPC用の2種類のスライダーを追加

ブログをご覧くださいましてありがとうございます。

本日はWordPressのテンプレートの修正依頼の仕事がありましたのでそちらを行いました。

もともと1種類しかないスライダーを、スマホ用とPC用の2つを実装しました。

画像のアスペクト比が違うんですよねー。

スライダー、スライドショーとかも言いますね。

ウェブサイトのトップページにあって、アイキャッチのバナーが横に流れて行くような動きをしながらどんどん入れ替わるようなものです。

 

今回はここのスライダーの改修です。

スマホ用とPC用の両方の画像をアップできるようなスライダーってあるんでしょうか?

あんまり見たことないなー。

しかも管理画面から更新したいとのことだったので、プラグインを使って実装し、テーマに書いていきました。

もともとのテーマがレスポンシブ仕様だったんで、PC用のスライダーだけだったのですが、幅100%指定になっているので、字が小さくなって見にくい。

なので、2種類のバナーが使えるようにしたかったということですね。

 

今回はMetaSliderというプラグインを使用しました。

スライダー自体は何個も作れます。

こちらでスマホ用のスライダー画像と、PC用のスライダー画像両方のスライダーを制作しました。

767px×767pxのスマホ用のスライダーと、1150px×367pxのPC用スライダーです。

そしてそこで吐き出されるphpタグをテーマに書き込んでいきます。

indexとかheaderのIDを調べて書き込みです。

 

レスポンシブデザインなので、両方のスライダーを同じ位置に貼り付けるような感じですね。

ただ、このままブラウザで見たらスマホ用とPC用の両方のスライダーが表示されてしまうため、CSSとメディアクエリでしっかりと設定。

ブラウザ幅が767px以下のときはPC用のスライダーを非表示、768px以上のときはスマホ用のスライダーを非表示というふうにして対応しました。

これって画像をスマホ用とPC用で切り替えたいときなんかに使う手段です。

昔は非表示にするということで、いろいろとSEO的には良くなかったのですが、最近のレスポンシブデザインではそこまで影響はないようです。

 

ということでブラウザチェックして完了です。

レスポンシブデザインでもただただ画像幅を100%にしても、画像内の文字が見にくかったりするとエンドユーザーは使いにくいです。

そういった部分をしっかりと丁寧に作り込んでいくことが昨今のウェブサイトでは必要とされていると感じます。

投稿者プロフィール

古田 健
古田 健
WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。
ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。