SWELLプロモーションバナーのつくり方｜公式サイトをまねてみた！

このような疑問にお答えします。

このような内容をお伝えしていきます。

SWELLのプロモーションバナーって、シンプルでおしゃれ、そしてカッコいいよね！

公式サイトと同じプロモーションバナーをずっとつくりたいと思っていました・・・

SWELLを使い慣れてきて、ようやくつくり方がわかったので紹介しますね。

SWELLプロモーションバナーのつくり方

それでは、プロモーションバナーのつくり方を説明していきます。

プロモーションバナーは、次のような5つのブロックに分かれています。

ステップ１～６で、つくり方の流れを説明していきますね。

SWELLプロモーションバナー｜つくり方の流れ

このような流れでプロモーションバナーを完成させます。

それでは、ステップごとに詳しく説明していきます。

STEP1 : 画像を取得

公式サイトの記事から画像を取得します。

▼こちらの記事からどうぞ。

記事の中に、つぎのようなSWELLプロモーション用バナーがあります。

STEP2 : 文章を入力

公式サイトを参考に赤枠の文章をブロック毎に入力します。

1. テキスト入力
2. テキストの配置を変更
3. 中央寄せ
4. SWELL装飾
5. フォントサイズ→S

こちらも同じように、赤枠の文章を入力。

1. テキスト入力
2. テキストの配置を変更
3. 中央寄せ
4. SWELL装飾
5. フォントサイズ→S

STEP3 : SWELL リンクボタンの設置

ブロック ⇒ SWELLボタンを選択

設定 ⇒ ブロック ⇒ キラッと ⇒ ボタンカラー設定 ⇒ 青

リンクURLは、公式サイトからコピー

STEP4 : グループ化

STEP1～STEP3でつくったブロックを1つのブロックにグループ化します。

グループ化したいブロックを選択 ⇒ オプション ⇒ グループ化

これで1つのブロックにグループ化されます。
あともう少しで完成です！

STEP5 : 背景色・文字色の変更

サイトで使っている背景色を調べるのに、こちらのサイトがおすすめです。

画像をコピペすると色を調べてくれます。

イメージカラーピッカーで調べた背景色を選択 ⇒ テキストの色は白を選択

色の変更が完了したら、最終チェックでフォントサイズ、 テキストの配置のバランスを確認してください。

STEP6 : アフィリエイトリンクを貼る

SWELLプロモーション用バナー（画像）に公式サイトからコピペしたリンクを貼る。

これで完了です。

お疲れ様でした！

まとめ

SWELLプロモーションバナーのつくり方の説明でした。

これでSWELLのアフィリエイトがうまくいけば最高ですよね！

僕はAFFINGER5を前に使ってたんですけど、SWELLにしてから記事の更新ペースが2倍くらいに上がってます。

大袈裟じゃなくて、ほんとーに、ブログが感動的に書きやすい！

ブログ初心者には、最高のテーマだと思います。

SWELLを使うブロガーが増えればいいですね。

それではまた。