この記事は4-5-1.SWELLで作る教室サイトのトップページ設計〈前編〉|着せ替えデザイン応用の抜粋・再編成です。テキストリンクではなく、「バナー」を設置して、読者が迷いにくい導線を作っていきましょう。
目次
バナーリンクで行き先を視覚的に伝える
🧭 サイト全体の構成図（ウィジェット配置イメージ）
サイドバーに“曜日別バナー”を設置する
- 外観 → ウィジェット → 共通サイドバー
- 「画像」ウィジェットを9個追加
- バナー画像を作成し（今回360×180で作成）＋各種固定ページへのリンク設置
説明アイコンSWELLではサイドバーに「バナー」を並べると、
見た目にも分かりやすく、スマホでは本文下に表示されます。
グロナビと重複しても問題ありません。行動導線を増やすのが目的です。
ウィジェットに画像ブロックで画像を入れて、リンク先にURLを入れれば、サイドバーにバナーが設置できます。
ウィジェットではなく、本文にバナーを入れるには？
投稿や固定ページにバナーを設置したい場合は以下の通りです。
STEP
画像ブロックで画像を本文に入れる
STEP
画像を選択しリンクマークをクリック
STEP
URLを入力して⏎をクリック
まとめ
説明アイコンバナーにすることで、まず「テキストリンクより断然目立つ」。
それに加えて、「画像なので移動先がすぐ理解できる」といった効果があります。
コメント