SWELLバナーリンクブロックの使い方｜おしゃれな画像リンクを編集なしで作成できる！

「おしゃれな画像リンクを作りたい」

「作成した画像を外部サイトで編集し直すのは面倒…」

「バナーリンクブロックの設定方法は？」

この記事では、そんな方に向けて、SWELLでバナーリンクブロックの使い方を解説します。

バナーリンクブロックとは…カスタマイズ性の高いバナー型のリンクを作成できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• 外部サイトを利用せず、記事編集ページで画像リンクをカスタマイズできる

できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事の執筆で作業効率UP、かつおしゃれなバナーリンクを作成できました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELLバナーリンクブロックでできること3選

SWELLのバナーリンクブロックでは以下のようなことができます。

それぞれ詳しく解説します。

画像(バナー)を外部サイトで編集せずデザインできる

SWELLのバナーリンクブロックは、画像のサイズ変更やカラー設定など、外部サイトで編集せずともカスタマイズできます。

画像を外部サイトで編集するのは時間と労力がかかりますが、SWELLでは記事編集ページでそのままカスタマイズできるので記事の作成時間を削減できますよ。

画像(バナー)にテキストを挿入できる

SWELLのバナーリンクブロックは、設定した画像の上にテキストを挿入できます。

場合によって、画像内のテキストだと見づらく読みにくいこともありますが、

画像の上からそのままテキストを挿入することで、ハッキリ分かりやすく読みやすいテキストが表示されますよ。

また、設定したテキストの色を自由に変更することもできますよ。

画像(バナー)に内部リンクと外部リンクを設定できる

SWELLのバナーリンクには内部リンクだけではなく、外部リンクも設定できます。

画像付きでアフィリエイトリンクや𝕏（旧Twitter）などのSNSも設置でき、クリック率に良い影響も与えるでしょう。

SWELLバナーリンクブロックの使い方とカスタム設定7つ

SWELLのバナーリンクブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：画像編集の必要なし！便利なカスタムバナー機能の使い方

ちなみに、バナーリンクブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

バナーリンクブロックで設定可能な項目は7つあります。

それぞれ詳しく解説します。

タイトルとサブテキストをつける

SWELLのバナーリンクブロックに画像を挿入すると、タイトルとサブテキストを設定できます。

タイトルとサブテキストを設定すると、以下のように白色がデフォルトみたいです。

タイトルのみを入力したり、タイトルとサブテキストの両方を未入力で使うこともできるので、お好みで設定してください。

テキストの色も変更できるので、後ほど解説します。

バナーの高さを決める

SWELLのバナーリンクブロックでは、バナーの高さをデバイスごとに設定できます。

横幅が600px以上のデバイスの場合は「バナーの高さ(PC/TAB)」の設定が適応され、横幅が600px未満の場合は「バナーの高さ(MOBILE)」の設定が適応されるみたいです。

バナーの高さを設定する際は、数字と単位を半角で入力してください。

バナーの高さを設定するとき、全角で入力されていたり、単位が入力されていなかったりすると正しく反映されないので注意しましょう。

ちなみに、単位は「px」以外の「cm」でも設定できました。

ブラー効果をつけるか選ぶ

バナーリンクブロックに設定した画像にブラー効果をつけることができます。

ブラー効果とは…画像をぼかす視覚効果のこと

以下の画像は、ブラー効果をつけない場合とつけた場合の比較です。

このようにタイトルとサブテキストをぼかすことなく、画像だけをぼかすことができます。

ちなみに、以下のように画像が単色などブラー効果をつけても変化が見られない場合もありました。

影をつけるか選ぶ

バナーリンクブロックに設定した画像の枠に影をつけることができます。

以下の画像は、ブラー効果をつけない場合とつけた場合の比較です。

影をつけることで画像が立体的に見えたり、より際立たせる効果が得られます。

ただ、そもそも画像が暗かったり、カラー設定で暗い色を選択する、もしくはオーバーレイの不透明度を上げたりすると影をつける効果が得られにくいので注意してください。後ほど「テキストと背景のカラーを設定する」で解説。

角の丸みを設定する

バナーリンクブロックに設定した画像の角に丸みをつけることもできます。

以下に、画像の丸みをつけたパターンをいくつか試してみました。

丸みがあると柔らかく穏やかな印象、角があると真面目で緊張感のある印象を与えますよ。

テキストと画像に重ねるカラーを設定する

SWELLのバナーリンクブロックでは、テキストカラーとオーバーレイカラーを設定することができます。

オーバーレイカラーとは…画像に重ねる色のこと

テキストカラーを設定すると以下のようにタイトルとサブテキストの色が変わります。

色を変更する際は【方法①】直感的に選ぶ【方法②】カラーコードを入力するのどちらかで設定しましょう。※【方法②】がおすすめ

使いたい色を直感的に選べない場合は、Google Chromeの拡張機能「ColorPick Eyedropper」というカラーピッカーを用いてカラーコードを調べましょう。

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

_{＼クリックで開く／}

オーバーレイカラーを設定する際は、あわせてオーバーレイの不透明度も設定します。

不透明度とは…画像の色を透過させない度合いのこと

オーバーレイの不透明度の設定をいくつか試してみると、「0」では設定したカラーの色が消えて、「100」では設定したカラーの色になりました。

※オーバーレイカラーを黒色に設定

つまり、オーバーレイの不透明度「50」を基準とすると、

• 50より小さい値では画像がよく見える
• 50より大きい値では画像が薄っすらしか見えない

ということです。

画像のAltテキストを入力する

通常の画像ブロックと同様、SWELLのバナーリンクブロックでもALTテキストを設定できます。

ALTテキストとは…Webサイト内にある画像が何らかのエラーで表示されなかったときに表示される代替テキストのこと

以下の画像は、正常に画像が表示された場合と何らかの異常があって画像が表示されなかった場合の比較です。

設定した画像が非表示になってしまった場合の備えとして、ALTテキストは必ず設定しましょう。

【実体験】SWELLバナーリンクブロックのおすすめな活用例3つを紹介

当ブログで使用しているSWELLのバナーリンクブロックのおすすめな活用方法を3つ紹介します。

それぞれ詳しく解説します。

外部サイトで画像を編集する代わりに使う

ここまで何度かお伝えしましたが、SWELLのバナーリンクブロックは外部サイトを用いずに画像を編集できます。

ただ、編集できない項目もあるので下記に記します。

カスタマイズできる部分は記事編集ページで修正し、作業効率を高めましょう。

タイトルや各H2見出しの下に使う

もしタイトルや各H2見出しの下に使う画像を別記事に使い回している場合、SWELLのバナーリンクを設定してテキスト部分だけを変えて使い回すといいですよ。

本記事を例に、タイトル下のアイキャッチ画像と各H2見出し下の画像の代わりにバナーリンクを使った場合、以下のようになります。

スマホ表示の場合だとテキストが2行以上になってしまいますが、複数の記事で画像が統一されていればサイト全体の統一感も増すので、上手に使いましょう。

ピックアップバナーの代わりに使う

SWELLのブログパーツ機能を使えば、バナーリンクがピックアップバナーの役割を担ってくれます。

ピックアップバナーとは…ヘッダー下に表示する画像リンクのこと

どちらも画像付きリンクという部分が共通していますが、バナーリンクブロックでは画像をそのままカスタマイズできるという点で優秀ですよ。

_{＼クリックで開く／}

SWELLバナーリンクブロックまとめ

今回は、SWELLでバナーリンクブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。