画像にリンクを付けておしゃれなリンクを作りたい！
SWELLのバナーリンクブロックでは、画像にリンクを張ることができます。
テキストを載せたり、画像のサイズや効果など、好みに応じてアレンジすることも可能です。
↓これがバナーリンク↓
どんな画像でも簡単にリンクを付けることができます！
それではさっそく、バナーリンクブロックの使い方やアレンジ方法を見ていきましょう。
- バナーリンクブロックの作成方法
- バナーリンク一覧＆カスタマイズ方法
SWELLバナーリンクブロックの作成方法
バナーリンクブロックを使って、リンク付き画像を作成する方法です。
投稿ページにある「＋」をクリックし、フォームに「バナーリンク」と入力します。
表示されるバナーリンクブロックを選択しましょう。
「アップロード」「メディアライブラリ」「URLから挿入」から、好きな画像を選びましょう。
以下のように画像が設定されていればOKです。
バナーリンクブロックを選択し、以下のマークをクリックしてリンクを挿入します。
自分のブログの内部リンクや、外部サイトへのリンクを入力することも可能です。
SWELLで作れるバナーリンク一覧＆カスタマイズ方法
SWELLのブロックでアレンジできる、様々なカスタマイズ方法をご紹介します。
投稿画面でバナーリンクを選択すると表示される、画面右側のブロックから編集することができます。
一緒に編集しながら進めていきましょう！
バナーの高さ
バナーの高さ、つまり画像の高さのサイズを調整することができます。
サイズが大きすぎると画面いっぱいに画像が表示されてしまうので、適度な大きさに調整しましょう。
モバイル幅はPC幅よりもサイズを小さくする方が見やすくなるよ！
「バナー設定」からPCとMOBILEの高さを入力することができます。
ブラー効果＆影を付ける
オリジナル画像に少し変化を加えたい場合、ブラー効果や影を付けるのがおすすめです。
ブラー効果を付けると、画像をぼかすことができます。
「ブラー効果をつける」「影をつける」をクリックするだけで反映されます。
角の丸みをつける
画像に丸みを出したい場合には、角を丸く設定することで全体的に柔らかい雰囲気にすることができます。
丸みは0~100までの数字で調整できるから、試してみてね！
「角の丸み」のバーで数字を設定することができます。
カラー設定
画像を覆うカバーや画面上に表示するテキストのカラー設定も可能です。
規定の色だけでなく自由に設定できるので、画像に合う色を探してみてください。
「テキストカラー」「オーバーレイカラー」「オーバーレイの不透明度」から設定可能です。
まとめ
この記事ではバナーリンクブロックの作成方法や、カスタマイズ方法などをご紹介しました。
バナーリンク機能はおしゃれなブログを作るためには欠かせません。ぜひ使ってみてください！
