AFFINGERでバナーを作成する方法が簡単過ぎて泣ける

affinger,バナー,作成AFFINGERの使い方

ツールを使わずクリックだけでバナーを作成できたら・・

affinger,バナー,作成gif

とっても嬉しいですよね(^^)

 

今回はAFFINGERのテーマアップデートによって追加された新機能、バナーボックス」の使用方法についてご紹介していきます。

リンクボタン挿入方法はコチラ

バナーカスタマイズはコチラ

AFFINGERのWING最新版を使ってて、

  • バナーボックスの使い方を知りたい人
  • バナーボックスをカスタマイズしたい人

といった人にオススメです!

注意!
AFFINGER(WING)のバナーボックス作成機能はver20180613以降のバージョンです。

AFFINGERでバナーを作成してみよう!

早速作ってみました↓

[st-flexbox url=”” fontawesome=”” title=”え?AFFINGERでバナー作成?” width=”300″ height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”#424242″ bordercolor=”#ccc” borderwidth=”1″ bgcolor=”#ccc” backgroud_image=”https://xn--t8j3bz04sl3w.xyz/wp-content/uploads/2018/06/f26896c8c3031cf5f92a58f441737e0a_s.jpg” blur=”on” left=”on” margin_bottom=”0″]

アフィンガーなら初心者でもカンタンにバナーが作れます!

[st-mybutton url=”#” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#039BE5″ bgcolor_top=”#29B6F6″ bordercolor=”#4FC3F7″ borderwidth=”1″ borderradius=”5″ fontsize=”bold” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#039BE5″ ref=”on”]

[/st-flexbox]

 

このバナー風ボタン、普段アフィンガーに慣れ親しんでいる方なら造作もなく作れると思います。

 

しかし見たこともないコードの羅列に(´;ω;`)ウッ…となる方(僕)も居ると思いますので、ポイントとなる設定箇所をまとめてみました。

AFFINGERでバナーボックスを作成する

AFFINGERでバナーを作成するには記事作成のビジュアルエディタ画面にて「タグ > デザイン > バナーボックス」とクリックするだけ。

affinger,バナー,作成

 

するとコードがズラッと並んで表示されます。そのままプレビューしてみると・・

affinger,バナー,作成

 

「タイトル」とだけ記されたバナーが表示されます。

affinger,バナー,作成

アヒルン
アヒルン

出来た!って、これじゃあシンプル過ぎw

うちゅうじん
うちゅうじん

これはただのフォーム。少しずつ変更していこう。

次にタイトルの「メインコピー」や説明に当たる「サブコピー」を書いていきます。

バナーのタイトルを変更する

タイトル(メインコピー)を変更するにはバナーコードの「title=”タイトル”」箇所を書き換えます。

 

コード「title=”タイトル”」箇所を・・

affinger,バナー,作成

 

「title=”バナーが作れる!”」に書き換えれば

affinger,バナー,作成

 

書き換えたタイトルに変更されます。

affinger,バナー,作成

 

説明文サブコピーを記入する

サブコピーの表示方法はバナーコードのスペースにテキストを記入するだけ。

affinger,バナー,作成

 

コード間の空白箇所に説明を記入すれば・・

affinger,バナー,作成

 

タイトルの下に説明が表示されます。

affinger,バナー,作成

アヒルン
アヒルン

おお、少しそれっぽくなってきたね!

うちゅうじん
うちゅうじん

では背景に画像を設定してみよう。

バナーの背景に画像を設定する

作成したバナーの背景に画像を設定するには

  1. 画像を準備する
  2. 画像のURLを取得する
  3. 「backgroud_image」に画像URLを挿入

の順で行っていきます。

STEP1. 画像を準備する

先に画像を準備します。

affinger,バナー,作成,300
OYAKUN
OYAKUN
画像の大きさは300〜400pxくらいが個人的にオススメです。

STEP2. メディアを追加して画像URLを取得

WordPress内に画像を取り込み、バナー背景に設置するための画像URLを取得します。

 

ダッシュボードの記事作成画面から「メディアを追加」をクリック。

affinger,バナー,作成

 

メディアを追加画面に移るので、

affinger,バナー,作成

 

準備した画像を画面内にドロップ。

affinger,バナー,作成

 

アップロードされたのを確認したら、

affinger,バナー,作成

 

画像のURL全部をまるっとコピーして、

affinger,バナー,作成

 

画像URLのコピーが完了したら「メディアを追加」画面を閉じます。

affinger,バナー,作成

STEP3. バナーボックスに画像URLを挿入

バナーコードの「backgroud_image=””」箇所、””の間に画像URLを挿入します。

affinger,バナー,作成

 

こんな感じになってればOK↓プレビューすると・・

affinger,バナー,作成

 

じゃ〜ん。

affinger,バナー,作成

アヒルン
アヒルン

おお〜それっぽいのが出来た!でも画像の右端が・・

うちゅうじん
うちゅうじん

だな。こんな時はバナーの大きさを指定してあげよう。

バナー背景画像の大きさを指定する。

バナーの背景画像の大きさを指定するには「width」と「height」に指定値を入力します。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold”]

  • 横幅:width=”指定値(%)”
  • 高さ:height=”指定値(px)”

[/st-mybox]

affinger,バナー,作成

 

今回はサンプル画像の大きさに合わせて

  • 横幅:width=”400
  • 高さ:height=”200

に設定してみました。

affinger,バナー,作成

 

大きさが変わり、画像の切れがなくなりましたね。

affinger,バナー,作成

注意!
バナー画像のボカシは仕様です。「blur=”on”」を「blur=””」にすることでボカシはなくなります。
参考:バナー風デザインを作成するショートコード
アヒルン
アヒルン

いいね!綺麗になってきた!ただ画像の色と重なって説明文が見づらいかな・・

うちゅうじん
うちゅうじん

じゃあ説明文(サブコピー)のフォントカラーも変えてみよう。

 

バナー説明文の文字色を変更する

サブコピーの文字色を変更するにはビジュアルエディタ画面で「テキスト色」にて指定の色を選択します。

 

色を変更したいテキスト箇所を選択して、

affinger,バナー,作成

 

ツールの「テキスト色」を選択。

affinger,バナー,作成

 

タイトル色と同じ「白」を選択してプレビューすると・・

affinger,バナー,作成

 

説明文の文字色が白に変更出来ました。

affinger,バナー,作成

アヒルン
アヒルン

説明文がすごく読みやすくなったね!ところでリンクボタンって付けられるの?

うちゅうじん
うちゅうじん

モチロン!既存の機能ですぐに可能だ。

コメント

タイトルとURLをコピーしました