【SWELL】バナーリンクの使い方【文字入り画像リンクが作れる】

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL】バナーリンクの使い方【3パターンのバナーリンクを紹介】

【SWELL】バナーリンクの使い方【バナーリンク編】

「バナーリンクブロック」を挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「バナーリンク」を選択します。

「バナーリンクブロック」が挿入されました。

「バナーリンクブロック」の使い方

赤枠の各機能について紹介していきます。

以下の順で紹介していきます。

左側が設定で、右側がその設定が反映された状態になります。

バナー設定

カラー設定

画像設定

完成版（再掲）

上記で紹介した機能を使って （こちら）のバナーリンクを作成しました。

【SWELL】バナーリンクの使い方【画像編】

※ 画像にテキストを重ねたい場合はCanva等で文字を重ねた画像を用意する必要があります。

「画像ブロック」を挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「メディア」＞「画像」を選択します。

「画像ブロック」が挿入されました。

「画像ブロック」でバナーリンクを作る

「メディアライブラリ」から画像を挿入します。

画像が挿入されました。

画像のスタイルを変更

 （設定）から、「ブロック」＞「スタイル」を開きます。

画像が角丸になりました。

画像にリンクを貼る

トップツールバーから、「 （リンク）」を選択します。

URLをペーストまたは入力後、「 （リンク設定）」を選択します。

完成版（再掲）

上記で紹介した機能を使って （こちら）のバナーリンクを作成しました。

【SWELL】バナーリンクの使い方【カバー編】

「画像ブロック」を挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「メディア」＞「画像」を選択します。

「画像ブロック」が挿入されました。

「画像ブロック」と「カバー」でバナーリンクを作る

「メディアライブラリ」から画像を挿入します。

画像が挿入されました。

画像に文字を重ねる

トップツールバーから、「 （画像上にテキストを追加）」を選択します。

「画像上にテキストを追加」できるようになりました。

フォントサイズ

テキストを全選択後、トップツールバーの「 （フォントサイズ）」からフォントサイズを変更できます。

フォントサイズを「XL」にしました。

テキスト色

テキストを全選択後、トップツールバーの「 （テキスト色）」からテキスト色を変更できます。

分かりにくいですが、テキスト色を「#04384C」にしました。

背景色

テキストを全選択後、トップツールバーの「 （背景色）」から背景色を変更できます。

背景色を「黒」になっています。

リンク

テキストを全選択後、トップツールバーの「 （リンク）」からURLをペーストまたは入力します。

テキストがリンクへと変わった後、再度テキストし、新しいタブで開かせたい場合は「 新しいタブで開く」に「 」を入れます。

コンテンツ位置を変更

トップツールバーから、「コンテンツ位置を変更」を選択します。

赤丸の位置を選択するとテキストの位置が中央から上方へと移動しました。

完成版（再掲）

上記で紹介した機能を使って （こちら）のバナーリンクを作成しました。

今回は以上です。