前回、プラグイン Smart Slider 3 を導入したことで、画像が自動で入れ替わるスライドショーを表示できるようになりました。これだけでもサイトの印象がだいぶ変わったのですが、今回は少し「サイズ」の設定をいじって、ちょっとしたカスタマイズに挑戦しました。
今回の目的は「デザイン性の向上」。その第一歩は“違和感をなくすこと”から始まります。あらためてスライドショーを見直してみると、画面の幅に合わせて画像サイズが自動で調整され、全幅レイアウトになる仕組みになっていました。このおかげで、表示するたびに自然と画面に馴染むようになっているんです。
Cocoonスキンとスライドショーの“違和感”
一方で、Cocoonで使っているスキン「手書き風ノート」は、ちょっとユニークなデザインになっています。画面いっぱいに広がる方眼紙の背景、その左上には斜めの切り込み。そして、その上に一回り小さい無地の紙が重ねられ、記事はその無地の紙の上に書かれているんです。
ところが、スライドショーの画像はウィンドウの幅いっぱいにレイアウトされてしまうので、背景の方眼紙を覆い隠すような形に。記事本文と同じ“無地の紙”の幅に収めた方が自然なのに、全幅のスライド画像はどこかちぐはぐに見えてしまいました。
では、一回り小さい無地の紙の上にスライド画像を配置するにはどうしたらいいのか？
実はこれ、Smart Slider 3 の無料版でも簡単に実現できるんです。ほんの少し設定を変えるだけで、記事本文と一体感のあるスライドショーに仕上げることができます。
参考記事を頼りに、いざカスタマイズ
前回は、TCD WordPress Theme の記事
「Smart Slider 3の使い方：自由度の高いスライダープラグイン」
を参考にしながら、ほぼデフォルト設定のままでスライドショーを設置しました。
その記事にもカスタマイズ方法が紹介されていたのですが、今回はもう一歩踏み込んでみることに。参考にしたのは、TecFfee さんの
「【Smart Slider 3】スライダー設定② Size(サイズ)【WordPress】」。
そこに書かれていた「Size」の設定変更を取り入れてみました。
全幅から「Boxed」へ
Smart Slider 3 のデフォルトでは、スライドショーは画面いっぱいに 全幅 でレイアウトされます。これはこれでダイナミックなのですが、Cocoonの「手書き風ノート」スキンを使っていると、背景の方眼紙をスライド画像が覆い隠してしまい、どうも違和感が…。
そこで思い切って、レイアウトを 「全幅」から「Boxed」 に変更。
他の設定（自動スケーリングの Downscale/Upscale など）は、すべてデフォルトのままにしました：
結果、記事本文と同じ“無地の紙”の幅にスライドショーが収まり、レイアウト全体に一体感が出てきました。
前回の記事で示したデフォルトのレイアウトと見比べてみると、スライドショーの画像がわずかに小さく、一回りだけ縮んでいるのが確認できると思います。小さな設定変更ですが、「見た目の心地よさ」を整えるだけで、サイト全体の印象がぐっと良くなる気がします。こうした細かい調整を積み重ねて、自分らしいデザインに近づけていきたいですね。
