アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
バナーリンクブロックを使えば、画像編集ソフトなしでもわずか3ステップで本格的なバナーが作成できます。
この記事では、基本的な使い方からカスタム設定、ピックアップバナーとの使い分けまで詳しく解説します。
この記事を読んで実践すれば、サイト内のどこでも使えるバナーリンクが作れますよ！
ではさっそく始めましょう。
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLバナーリンクブロックとは
SWELLバナーリンクブロックは、WordPressテーマSWELL独自の画像リンク作成機能です。
SWELLバナーリンクブロックには次の3つの特徴があります。
以下で詳しく解説します。
画像リンクを簡単に作成できる専用ブロック
SWELLバナーリンクブロックは、画像に文字とリンクを重ねたバナーを数分で作成できる専用ブロックです。
通常の画像ブロックと異なり、画像上にタイトル・サブテキストの入力欄が最初から用意されています。
画像ブロック
バナーリンク
ブロック挿入画面で「バナーリンク」を選択し、画像を選んでテキストを入力するだけで完成。
初心者でも直感的に操作でき、すぐに実用的なバナーリンクが作れます。
画像編集ソフト不要でプロ仕様のデザインが可能
Photoshopなどの画像編集ソフトがなくても、本格的なバナーデザインの作成が可能です。
ブラー効果（※①）、角の丸み、影の設定、オーバーレイカラー（※②）などの装飾機能が標準搭載されているためです。
元の画像
ブラー効果
角の丸み処理
オーバーレイ処理
画像にぼかし効果をかけてテキストを際立たせたり、角を丸くして柔らかい印象にしたりできます。
外部ツールに頼らず、WordPress内でデザイン作業が完結するのがメリットです。
カバーブロックと画像ブロックの長所を併せ持つ
SWELLバナーリンクブロックは、カバーブロックと画像ブロックの長所を組み合わせた機能です。
画像ブロックのシンプルさとカバーブロックのテキスト重ね機能を併せ持つためです。
クリックして違いを確認してみてください／
- 画像ブロックでは画像にテキストを追加できません.
- カバーブロックでは画像にリンクを設定できません。
しかしバナーリンクブロックなら両方の機能を同時に使用でき、より柔軟にデザイン編集できます。
SWELLバナーリンクの基本的な使い方
バナーリンクブロックの設置は3つのステップで完了します。
順番に見ていきましょう。
バナーリンクブロックを挿入する
バナーリンクブロックの挿入は、他のSWELLブロックの追加と同じ手順です。
まず記事編集画面で「＋」ボタンをクリックし、ブロック選択画面を開きましょう。
記事編集画面の左上にある「＋」ボタンをクリックしてください。
検索窓に「バナーリンク」と入力するか、SWELLブロック一覧からバナーリンクを選択しましょう。
これでバナーリンクが記事編集画面に挿入されます。
時短テクニックとして、段落ブロックに「/バナーリンク」または「/banner-link」と入力する方法もあります。
アッフィーこの「/」の操作は便利なので覚えておきましょう
画像を設定しリンクを貼る
画像とリンクの設定は、挿入されたバナーリンクブロック内で行います。
画像を挿入した後ツールバーからリンクURLを設定する流れです。
「アップロード」または「メディアライブラリ」から画像を選択してください。
画像挿入後、ブロックツールバーからリンクアイコンをクリック します。
①入力欄にリンク先URLを入力して②「送信」マークをクリックしましょう。
ペンマークをクリックしてみてください。
すると、「高度」の下に「新しいタブで開く」が表示され、チェックができるようになります。
必要に応じて「新しいタブで開く」にチェックを入れてください。
設定を変更したら忘れずに「保存」をクリックしておきましょう。
アッフィーこれで画像の挿入とリンクの設定が完了です。
タイトルとサブテキストを入力する
バナーリンクブロックでは、タイトルとサブテキストの入力ができます。
文字サイズや文字の色、背景色のカスタマイズも可能です。
バナーリンクブロック内の「タイトル」欄に見出しテキストを入力しましょう。
必要に応じて「サブテキスト」欄に補足説明を追加してください。
テキスト選択後、ツールバーから文字色やサイズ、背景色を調整しましょう。
ここでは以下のようにカスタマイズしました。
- タイトルのサイズを「L」
- タイトルとサブタイトルの文字色を「黒」
- タイトルとサブテキストの背景色を「白」
- タイトルとサブテキストの位置を上部に配置
上記バナーリンクの作成手順は、このアコーディオンをクリックすると確認できます。
STEP1
タイトル全体を選択したら、ブロックツールバーの「テキスト色」ボタンをクリックしましょう。
文字色として「黒」を選択してください。
文字色の次は背景色を変更しましょう。
タイトル全体を選択してブロックツールバーの「背景色」ボタンをクリックしてください。
背景色を「白」に設定します。
サブテキストの文字色もタイトルの文字色と同様に「黒」に設定します。
サブテキストの背景色もタイトルと同様「白」にします。
最後にタイトルとサブテキストを上部に配置しましょう。
ブロックツールバーの「垂直配置を変更」ボタンをクリックしてください。
「上揃え」を選択すると、タイトルとサブテキストが上部に配置されます。
SWELLバナーリンクのカスタム設定
バナーリンクブロックの見た目を調整するカスタム設定について解説します。
カスタム設定は記事編集画面のサイドバーから行います。
以下の3つの観点から詳しく説明していきますね。
バナーの高さの調整方法
バナーの高さは、PC・タブレット用とスマホ用で別々に設定できます。
サイドバーのバナー設定で数値を入力するだけでバナーの高さ調整ができます。
見た目はこんな感じです↓
高さ：100px
高さ：200px
高さ：300px
横幅600px以上のデバイスではPC/TAB設定が、600px未満ではMOBILE設定が適用されます。
デザイン設定（角の丸み・影・ブラー効果）
バナーの印象を大きく変える3つの装飾機能が用意されています。
これらを組み合わせることで、サイトに合った雰囲気を作り出せますよ。
角の丸み設定
角の丸みは 0〜100の数値で調整できます。
「0」は四角に、「100」は最大の丸みになります。
角の丸み：0
角の丸み：50
角の丸み：100
アッフィー角の丸みが大きいほど柔らかい印象になりますね
影をつける設定
ONにするとバナー画像の縁に影を追加できます。
影をつける：ON
影をつける：OFF
アッフィー影をつけると立体感が生まれますね！
ブラー効果をつける設定
ブラー効果で画像をぼかすことができます。
ブラー効果：ON
ブラー効果：OFF
アッフィー背景をぼかすとテキストが際立ちますね
カラー設定とオーバーレイ調整
テキストの色とオーバーレイカラー（画像に被せる色）を自由に変更できます。
両者をうまく使えば、読みやすさを保ちながらサイトのデザインに合わせた配色が可能となります。
テキストカラー設定
- カラーパレットから直感的に選択
- カラーコード入力でより精密な色指定が可能
テキストカラー：デフォルト
テキストカラー：黄色
オーバーレイ設定
- 画像全体に重ねる色を指定
- 不透明度0〜100で色の濃さを調整（50がデフォルト）
不透明度：0
不透明度：50
不透明度：100
明るい画像でテキストが読みにくい場合、黒のオーバーレイを30〜50%程度かけると文字がはっきり見えます。
カラーコードが分からない時は、GoogleChromeの拡張機能「Color Picker for Chrome」が役立ちます。
クリックすると開きます／
「Color Picker for Chrome」を使ってカラーコードを調べる手順はこちら
ChromeウェブストアーからColor Picker for Chromeのページを開きましょう。
ページが開いたら右上にある「Chromeに追加」ボタンをクリックしてください。
「Color Picker for Chrome」を追加するか確認されますので、「拡張機能を追加」をクリックします。
すると、「Color Picker for Chrome」が追加されました、とのコメントが表示されます。
これで「Color Picker for Chrome」の導入は完了です。
導入したらよく使う拡張機能としてお気に入りに固定しておきましょう。
下の画像のように、拡張機能ボタン⇒固定ボタンの順にクリックしてください。
固定すると、Chrome上部にあるツールバーに常時表示されるようになります。
カラーピッカーを使う時は、webサイトを開いた状態で①拡張機能をクリックして表示される、②「PICK COLOR」をクリックしてください。
「PICK COLOR」をクリックすると、カーソル付近が虫眼鏡のように拡大されます。
調べたい箇所にカーソルをおいてクリックしてください。
クリックすると、下図のようにカラーコードが表示されます。
これをコピーすれば、カラーコードのコピーは完了です。
SWELLピックアップバナーとの使い分け
ピックアップバナーとバナーリンクブロックは、どちらも画像リンクですが用途が異なります。
どのように使い分けたらいいかを解説します。
ピックアップバナーの特徴と用途
ピックアップバナーは、サイト全体で統一表示される固定バナーです。
ヘッダー下に常時表示され、すべてのページで同じ内容が表示されます。
読者がトップページを開いた瞬間に目に入るので、一番読んでほしい記事やページに誘導することができます。
設定は1回行うだけで全ページに反映されるため、管理が簡単です。
ピックアップバナーの設置は、WordPress管理画面の「外観」⇒「メニュー」の「ピックアップバナー」で画像とリンク先を設定するだけです。
なお、ピックアップバナーの使い方については以下の記事で詳しく解説していますので参考にしてください。
バナーリンクブロックが適している場面
バナーリンクブロックは、カテゴリーページ、タグページなどで、カテゴリーやタグごとにおすすめ記事を並べた記事バナーを作る場合に最適です。
柔軟にバナーを配置できるためです。
以下のようにピックアップバナーとバナーリンクを組み合わせれば、読者の離脱を防ぐ効果があります。
- トップページにはサイト全体でのおすすめ記事を配置（ピックアップバナー）
- カテゴリーページにはカテゴリーのおすすめ記事を配置（バナーリンク）
また、個別の記事の途中や最後に記事バナーを配置することで、読者の興味に合わせた誘導も可能となります。
カテゴリページに記事バナーを設置する手順
カテゴリーページに表示する記事バナーを作成・設置する手順は以下のとおりです。
WordPress管理画面から「ブログパーツ」⇒「投稿を追加」をクリックしてください。
ブログパーツの使い方は以下の記事を参考にしてください。
以下の順に作業し記事バナーを作成しましょう。
- ブログパーツの新規ページにリッチカラムブロックを挿入し、カラムを4つ作成し4列表示にする。
- それぞれのカラムにバナーリンクブロックを設置し、おすすめ記事をリンクする。
- ブログパーツ全体を選択し、用途で「カテゴリー用」にチェックを入れる
- 「公開」ボタンをクリックする。
リッチカラムの使い方は以下の記事を参考にしてください。
WordPress管理画面から「投稿」⇒「カテゴリー」をクリックします。
カテゴリー一覧から、ブログパーツを設置するカテゴリーを選択しましょう。
下へとスクロールして、「ページで呼び出すブログパーツ」で記事バナーを呼び出します。
最後に「更新」ボタンを忘れずクリックしておきましょう。
すると、カテゴリーページに記事バナーが表示されます。
個別の記事に表示する記事バナーを設置する手順
個別の記事に表示する記事バナーを作成・設置する手順は以下のとおりです。
ブログパーツで記事バナーを作るまでは「カテゴリページに記事バナー設置する」手順と同じです。
WordPress管理画面から「ブログパーツ」⇒「投稿を追加」をクリックしてください。
以下の順に作業し記事バナーを作成しましょう。
- ブログパーツの新規ページにリッチカラムブロックを挿入し、カラムを4つ作成し4列表示にする。
- それぞれのカラムにバナーリンクブロックを設置し、おすすめ記事をリンクする。
- 「公開」ボタンをクリックする。
WordPress管理画面に戻り、「ブログパーツ」から先ほど作成したブログパーツ（記事バナー）の呼び出しコードをコピーしてください。
WordPress管理画面に戻り、「外観」⇒「ウィジェット」の順にクリックしてください。
左側のウィジェットの「カスタムHTML」を「記事上部」へドラッグ＆ドロップしましょう。
ドラッグ＆ドロップすると、下の画像のように「カスタムHTML」の入力欄が開くので、内容欄に先ほどコピーしたブログパーツの呼び出しコードを貼り付けます。
貼り付けたら、下部の「保存」ボタンをクリックしてください。
すると、投稿記事の上部に記事バナーが表示されます。
アッフィーこれで完成です
お疲れさまでした！
SWELLバナーリンクのまとめ
今回は、SWELLバナーリンクブロックの使い方から活用術まで解説しました。
本記事の内容は以下のとおりです。
SWELLバナーリンクブロックを活用すれば、外部ツールに頼ることなくWordPress内で完結したバナー作成が可能になり、限られた時間でも読者の関心を引くサイト作りができます。
ぜひ今回紹介した方法を参考に、あなたのブログをより充実させてみてください。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、バナーリンクブロックが使いやすいSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
