SWELL公式サイトの記事下（「この記事を書いた人」の直前）に設置されているプロモーションバナーエリアを再現したいけど、どう操作すれば作れるのか分からないと悩んでいる人もいるでしょう。
結論。ブログパーツでPRバナーエリアを作成し、呼び出しコードをCTAウィジェットにカスタムHTMLで貼り付ければ実現できます。
この記事では、SWELL本家・愛好家のブログでよく見かける記事下プロモーションエリアをブログパーツで作る方法を画像つきでわかりやすく紹介します！
ブログパーツで作るプロモーションバナーエリア完成形
今回紹介する通りに操作していただければ、上の画像のようなSWELLプロモーションバナーエリアのブログパーツが作成できます。
SWELL MANIAさんのコピペでOKなブロックパターンのようなのを作ろうと思いましたが、1からの作り方を覚えていただくとより一層SWELLブログライフを楽しめるんじゃないかなということでこの記事ではあえて１工程ずつ紹介していきますー！
ブログパーツ作成の手順
ブログパーツを作る手順はざっくりこんな感じです。
- ブログパーツを新規追加
- 「グループ」ブロックで紺色背景エリアを作る
- グループの中にプロモーションバナー画像とテキスト、SWELLボタンを設置する
実際の画面のキャプチャつきで詳しく解説していきます。
【1】ブログパーツを新規追加
管理画面メニューの「ブログパーツ」＞「新規追加」をクリックして新しくブログパーツ作成開始します。
タイトルは「記事下CTA」など適当にご自身が分かりやすい名前をつけてください。
【2】「グループ」ブロックで紺色背景エリアを作る
グループブロックを選択します。
グループブロックの設定の「背景」を選択します。
Hexの下の#欄に「04384C」を入れます。
紺色背景エリアができました。
【3】グループブロックの中にプロモーションバナーを設置する
グループブロックの中でブロックを追加します。
「画像」を選択し、SWELLプロモーションバナー画像をアップロードします。
SWELL公式サイトの追尾サイドバーに表示されてる画像をダウンロードしてきて使うと良いでしょう。
そのままだと大きすぎるので、画像の幅を「450」に変更します。
「スタイル」＞「フォトフレーム」を選択します。
フォトフレームを適用することでSWELLプロモーションバナーに白枠が追加されます。
バナーにリンクを設定します。
【4】グループブロックの中にテキストを設置する
「ブロックエディター完全対応のWordPress有料テーマ。」のような文章を、プロモーションバナーの下に追加します。
そのままだと文字が見づらいので、色の「テキスト」から文字色を白に変更します。
【5】グループブロックの中にSWELLボタンを設置する
テキストの下にSWELL公式サイトへ遷移するボタンを追加します。
「SWELLボタン」を選択します。
「SWELL公式サイトをみる」など入力し、ボタンのカラーを青のグラデーションに設定します。
リンク先にSWELLのアフィリエイトリンク（未取得の方は公式サイトのトップページやダウンロードページのURL）を設定します。
シンプルな矢印アイコンを右に配置して完成です。
