ホームページで3つの特徴や選ばれる理由を作る時、画像とテキストを別々に配置していませんか？
PCでは綺麗でも、スマホで見ると位置がズレてレイアウトが崩れやすいですよね。そんなお悩みを一発で解決するのがアイコンボックスウィジェットです。アイコン・見出し・説明文が1つにまとまったこの鉄板ウィジェットを使えば、誰でも簡単に、スマホ対応の美しいレイアウトが作れます！
アイコンボックスを使う最大のメリット
画像ウィジェット、見出しウィジェット、テキストウィジェット…とバラバラに配置すると、スマホ表示の際に余白や位置の調整が非常に大変です。
しかしアイコンボックスは、これら3つの要素が最初から1つのパッケージにまとまっています。そのため、どれだけ画面サイズが変わっても要素が迷子にならず、常に美しいバランスを保ってくれるのが最大のメリットです。複数カラムに並べた際も、高さや揃え位置の管理がとても簡単になります。
基本の設定手順
使い方はとても直感的です。ウィジェットを配置したら、左パネルの [ コンテンツ ] タブで以下の3つを設定するだけです。
- アイコンの選択： 標準搭載されている数百種類のアイコンから選ぶか、オリジナルのSVG画像をアップロードできます。
- 見出し＆説明文： 特徴1などの短いタイトルと、その下に入る補足テキストを入力します。
- アイコン位置： ここがとても便利です！ボタンをポチッと押すだけで、アイコンをテキストの「左・上・右」のどこに配置するかを一瞬で変更できます。
プロっぽく仕上げるコツ
[ スタイル ] タブでは、色や余白を細かく調整してプロっぽいデザインに仕上げましょう。
- アイコンの装飾： 色を変えるだけでなく、丸や四角の枠で囲むと、よりアイコンを目立たせることができます。
- ホバーアニメーション： 過去の記事で紹介したホバー設定も可能です。マウスを乗せた時にアイコンがじわっと浮き上がる動きをつけると、リッチな表現になります。
- 間隔の調整： アイコンとテキストの間のすき間も、スライダーで直感的に調整可能です。
まとめ
- アイコンボックスは、アイコン・見出し・説明文が一体化したウィジェット。
- 要素がバラバラにならないため、スマホ表示でもレイアウトが崩れない。
- [ コンテンツ ] タブで中身と配置を決め、[ スタイル ] タブで装飾やホバーの動きをつける。
選ばれる理由やサービス一覧は、サイトの魅力を伝える最重要エリアです。アイコンボックスを賢く活用して、見やすく美しいレイアウトをサクッと完成させましょう！
