先週から、Smart Slider 3 の無料版を使って、カテゴリーのスライド画像をちょっと格好良く見せる工夫を続けています。
- その１）スライドショーの「サイズ設定」を少しカスタマイズして、記事本文の背景と一体感を出す
- その２）スライドショー右上に出る日付を CSS で削除
- その３）スライドをフェードインさせて、ボタンを非表示
今回挑戦したのが、その４）スライドをクリックすると、各カテゴリーの一覧ページへ飛ばすというステップです。
参考にしたのは、WEBラボさんの記事「【Smart Slider 3】スライダー画像へリンクを貼る設定・手順解説」。手順はとてもシンプルでした。
- 左ナビゲーション下にある Smart Slider の「ダッシュボード」から、作成済みのプロジェクト（私の場合は Toppage）を開く。
- 各スライドにマウスをかぶせると「編集」の文字が現れるのでクリック。
- 編集画面に入ったら CONTENT タブでリンクを設定する。
これで無事、スライドから直接カテゴリー一覧に飛ばせるようになりました！
カテゴリー画像にリンクを付けて、回遊しやすいトップへ
「高橋商店」のトップページは、スライド切り替えボタンのないフェード表示でリンクなし。一方このサイトでは、各カテゴリーごとに画像を作成しているので、あえて画像からカテゴリー一覧へ飛べるリンクを貼りました。見た目はすっきり、目的地へは一直線。狙いは“迷わない導線”です。
なぜプラグイン？
WordPressの Cocoon には標準で複数画像のスライドショー機能がない ため、Smart Slider 3 を導入。最低限のカスタマイズだけで、十分に洗練されたトップページに仕上がりました。
これまでの変更ポイント
- フェードイン表示＋切り替えボタンを非表示で、主張しすぎないヒーローエリアに
- 各スライド画像にカテゴリー一覧へのリンクを設定して、クリック後の迷子を防止
- Cocoon × Smart Slider 3 の“軽め設定”で、読み込み負担を抑えつつデザイン性を確保
使ってみた感想
リンクなしのスライドは“雰囲気づくり”には最適。でも、サイト全体の回遊性を上げたいならリンクありが効果的。カテゴリー画像を用意しているサイトなら、スライド＝ナビゲーションとして活用するのが相性抜群でした。
小さな工夫で、大きな違い。
「眺めるスライド」から「導くスライド」へ——そんなアップデートです。
