お洒落なカテゴリーボタンの作り方

当ブログのトップページがこちらなんですが（読む頃には変わってるかも）、メインビジュアルの下にあるアイコン集の作り方を今回は解説していきます。

画像を作る

こういうアイコンの画像を作っておきましょう。

私はgeminiで作りました。

一枚ずつ作っているとトンマナがそろわず統一感に欠けるので、8個セットで作ってもらってから一枚ずつ分離しました。

トリミングするとどうしても画像が荒くなるので「この画像のvocal lessonだけの画像を作って」というプロンプトで分離作業をしました。（意外と大変）

リッチカラムを設置する

次に枠組みであるリッチカラムを設置します。

設置したらブロックからスタイルを選択。

パソコンでもモバイルでも3列で表示されるように設定しました。

バナーリンクを設置する

先ほど設置したリッチカラムの一つにバナーリンクを設置します。

メディアから画像を選びます。

先程作った画像を埋め込んでいきましょう。

なぜかデフォルト設定だと灰色のオーバーレイがかかった状態になるので、オーバーレイの不透明度を0にしましょう。

次に影をつけて、角の丸みを20に設定します。

全てのアイコンに同じ作業をして完成！