ツールを使わずクリックだけでバナーを作成できたら・・
![affinger,バナー,作成gif](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/ezgif-4-7326e73e62-300x197.gif)
とっても嬉しいですよね(^^)
今回はAFFINGERのテーマアップデートによって追加された新機能、「バナーボックス」の使用方法についてご紹介していきます。
AFFINGERのWING最新版を使ってて、
- バナーボックスの使い方を知りたい人
- バナーボックスをカスタマイズしたい人
といった人にオススメです!
AFFINGERでバナーを作成してみよう!
早速作ってみました↓
このバナー風ボタン、普段アフィンガーに慣れ親しんでいる方なら造作もなく作れると思います。
しかし見たこともないコードの羅列に(´;ω;`)ウッ…となる方(僕)も居ると思いますので、ポイントとなる設定箇所をまとめてみました。
AFFINGERでバナーボックスを作成する
AFFINGERでバナーを作成するには記事作成のビジュアルエディタ画面にて「タグ > デザイン > バナーボックス」とクリックするだけ。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/dc655402c858070bd9b0c7b6bf1bffa2-300x300.png)
するとコードがズラッと並んで表示されます。そのままプレビューしてみると・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/604357e1dbe0f2f7c22225faa48f8596.png)
「タイトル」とだけ記されたバナーが表示されます。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/318ffba19d3d492e097a682a4128e383.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
次にタイトルの「メインコピー」や説明に当たる「サブコピー」を書いていきます。
バナーのタイトルを変更する
タイトル(メインコピー)を変更するにはバナーコードの「title="タイトル"」箇所を書き換えます。
コード「title="タイトル"」箇所を・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/8c1bcb3022b69c9be08538cbfffc8dec.png)
「title="バナーが作れる!"」に書き換えれば
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/0dfa50d3053128357d90f733e280e4d1.png)
書き換えたタイトルに変更されます。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/974cadf11c8021a62b16d9cd38996732.png)
説明文サブコピーを記入する
サブコピーの表示方法はバナーコードのスペースにテキストを記入するだけ。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/9a343d2a6209bd955d7566a63fbf8867.png)
コード間の空白箇所に説明を記入すれば・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/8de87800268419dc56ad7af285b21c16.png)
タイトルの下に説明が表示されます。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/249e11456f14fe84688f874852b7c446.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
バナーの背景に画像を設定する
作成したバナーの背景に画像を設定するには
- 画像を準備する
- 画像のURLを取得する
- 「backgroud_image」に画像URLを挿入
の順で行っていきます。
STEP1. 画像を準備する
先に画像を準備します。
![OYAKUN](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/oyakun.png)
STEP2. メディアを追加して画像URLを取得
WordPress内に画像を取り込み、バナー背景に設置するための画像URLを取得します。
ダッシュボードの記事作成画面から「メディアを追加」をクリック。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/7a0e8f430397a187c02e5ec726caaab5.png)
メディアを追加画面に移るので、
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/bb98d0010645146bfa0ff2a6b175e6c4.png)
準備した画像を画面内にドロップ。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/db8142e6a9de9daac162f728e69932bc.png)
アップロードされたのを確認したら、
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/0c41e092fec58847901f3e5c6a11906e.png)
画像のURL全部をまるっとコピーして、
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/5550549252fdc272c5163db35fa62b4f-276x300.png)
画像URLのコピーが完了したら「メディアを追加」画面を閉じます。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/42c3c50b39e1164c5f9a4a33129e7e28.png)
STEP3. バナーボックスに画像URLを挿入
バナーコードの「backgroud_image=""」箇所、""の間に画像URLを挿入します。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/64a32d661f6e71646ff3d2b46b66052c.png)
こんな感じになってればOK↓プレビューすると・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/0c6ed368c38d85160e39ec4a5fdcb197.png)
じゃ〜ん。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/817adb244dae36da63c66b08046bf904.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
バナー背景画像の大きさを指定する。
バナーの背景画像の大きさを指定するには「width」と「height」に指定値を入力します。
- 横幅:width="指定値(%)"
- 高さ:height="指定値(px)"
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/25e9fff695334b8149b7199878cb2218.png)
今回はサンプル画像の大きさに合わせて
- 横幅:width="400"
- 高さ:height="200"
に設定してみました。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/4f05f040a5d7e0d62accbcf6c9e34d97.png)
大きさが変わり、画像の切れがなくなりましたね。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/d5f14ed35749471d3fee1b7fa88c566d.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
バナー説明文の文字色を変更する
サブコピーの文字色を変更するにはビジュアルエディタ画面で「テキスト色」にて指定の色を選択します。
色を変更したいテキスト箇所を選択して、
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/af00aa473d89a2edc2d78773197dd991.png)
ツールの「テキスト色」を選択。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/684be98264dc08110d59d9ff8fdeb4d5.png)
タイトル色と同じ「白」を選択してプレビューすると・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/f3d1c59ddb1a5d31e1b83613486cefca.png)
説明文の文字色が白に変更出来ました。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/6fba49c4fe87e216cf229ba50fb9cd6a.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
バナーにリンクボタンを挿入する
AFFINGERでバナーボックスにリンクボタンを挿入するには、設置したい位置で「タグ > その他パーツ > カスタムボタン > 各ボタン」の順に選択します。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/ceb26bbdb45ad69bbb3535aff1ecc288.png)
分かりづらいので実際にやってみます。
説明文の下にリンクボタンを設置する
例えば赤枠の部分にリンクボタンを設置する場合は、
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/4cf3539900af197ec0aa344c237f826e.png)
説明文の下で「タグ > その他パーツ > カスタムボタン (> 各ボタン)」と選択。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/b3c4e4b8e350da9e7632c53105f3d5bd.png)
すると説明文の下にボタンコードが挿入されます。プレビューすると・・
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/151b92438b8a95aac8824cf4b5b4820c.png)
![OYAKUN](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/oyakun.png)
説明文の下にボタンが設置出来ました。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/a4d28685b8eaaacd8b67a80fff73276b.png)
![あひる](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/ahirun01.png)
![ううこ](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/wooko-1.png)
ボタンにリンク先を設置する
ボタンにリンクを設置するには、ボタンコードの「st-mybutton url=""」にリンク先URLを挿入します。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/69ea7cd5fa583e2671432143d392d395.png)
今回は本記事のURLを挿入してみました。
![affinger,バナー,作成](https://xn--t8j3bz04sl3w.xyz/wp/wp-content/uploads/2018/06/c537665aa9a3616a531417ca0d7e4731.png)
実際に作成したバナーはこんな感じ↓
ボタンからリンク先が確認出来ましたか?
実はこのバナーボックス、さらに自分好みにカスタマイズ可能です。
同様に説明文の上にボタンを挿入することも可能です。