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

バナーをカスタマイズする

ある程度出来上がったバナーボックスをカスタマイズしてみましょう。

タイトルの左にアイコンを挿入する

バナータイトルの左側にアイコンを挿入してみます。

affinger,バナー,作成

 

AFFINGER(WING)でアイコン挿入を行うには、「タグ > WEBアイコン (>各アイコン)」で実現できます。

affinger,バナー,作成

 

fa-comments
(出力されたアイコンコード)

 

タイトル左にアイコンを挿入するにはバナーコードの「fontawesome=”” 」箇所にアイコンコードを挿入します。

affinger,バナー,作成

 

今回は「おしらせ」のアイコンコードを挿入。

affinger,バナー,作成

 

タイトルの左にお知らせアイコンが表示されました↓

[st-flexbox url=”” fontawesome=”fa-bullhorn” title=”バナーが作れる!” width=”400″ height=”200″ 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/children-593313_640-2.jpg” blur=”on” left=”” margin_bottom=”0″]

AFFINGERを使えば記事作成中にバナーも作れちゃう!

[st-mybutton url=”https://xn--t8j3bz04sl3w.xyz/wordpress/affinger-banner/4808/” title=”詳しくはコチラ” rel=”” fontawesome=”” target=”” color=”#fff” bgcolor=”#FFD54F” bgcolor_top=”#ffdb69″ bordercolor=”#FFEB3B” borderwidth=”1″ borderradius=”5″ fontsize=”” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#FFB300″ ref=”on”]

[/st-flexbox]

 

バナー全体にリンクを設定する

バナー全体にリンクを効かせる場合は「st-flexbox url=””」箇所にリンク先URLを挿入します。

affinger,バナー,作成

[st-mybox title=”注意ポイント” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef9a9a” bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]

バナー全体へのリンク設定は、リンクボタンと併用出来ません。

[/st-mybox]

 

「st-flexbox url=””」にリンク先URLを挿入すると・・

affinger,バナー,作成

 

バナーをクリックするだけで、リンク先に飛ぶようになります。

[st-flexbox url=”https://xn--t8j3bz04sl3w.xyz/wordpress/affinger-banner/4808/” fontawesome=”fa-bullhorn” title=”バナーが作れる!” width=”400″ height=”200″ 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/children-593313_640-2.jpg” blur=”on” left=”” margin_bottom=”0″]

AFFINGERを使えば記事作成中にバナーも作れちゃう!

[/st-flexbox]

 

バナーの角を丸くする

バナーの角を丸くするには「radius=”0″」の”0″を指定値に変更します。

affinger,バナー,作成

 

radius=”0″をradius=”30″へ変更してみると・・

affinger,バナー,作成

 

バナーの角が丸くなったのが確認できます↓

[st-flexbox url=”https://xn--t8j3bz04sl3w.xyz/wordpress/affinger-banner/4808/” fontawesome=”fa-bullhorn” title=”バナーが作れる!” width=”400″ height=”200″ color=”#fff” fontsize=”200″ radius=”30″ shadow=”#424242″ bordercolor=”#ccc” borderwidth=”1″ bgcolor=”#ccc” backgroud_image=”https://xn--t8j3bz04sl3w.xyz/wp-content/uploads/2018/06/children-593313_640-2.jpg” blur=”on” left=”” margin_bottom=”0″]

AFFINGERを使えば記事作成中にバナーも作れちゃう!

[/st-flexbox]

 

バナーの枠線の色を変更する

バナーの枠線の色を変更するには「bordercolor=”#ccc”」の#cccを指定webカラーに変更します。

affinger,バナー,作成

 

今回はwebカラーの青(#039BE5)に変更してみました。

affinger,バナー,作成

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold”]

AFFINGER(WING)の基本機能でwebカラーも「タグ > HTMLカラーコード」から1クリックで指定可能です。

[/st-mybox]

 

バナーの枠線が青になったのが分かります↓

[st-flexbox url=”https://xn--t8j3bz04sl3w.xyz/wordpress/affinger-banner/4808/” fontawesome=”fa-bullhorn” title=”バナーが作れる!” width=”400″ height=”200″ color=”#fff” fontsize=”200″ radius=”30″ shadow=”#424242″ bordercolor=”#039BE5″ borderwidth=”1″ bgcolor=”#ccc” backgroud_image=”https://xn--t8j3bz04sl3w.xyz/wp-content/uploads/2018/06/children-593313_640-2.jpg” blur=”on” left=”” margin_bottom=”0″]

AFFINGERを使えば記事作成中にバナーも作れちゃう!

[/st-flexbox]

 

バナーの枠線の太さを変更する

バナーの枠線の太さを変更するには「borderwidth=”1″」の1を指定値に変更します。

affinger,バナー,作成

 

borderwidth=”1″➜”5″に変更してみました。

affinger,バナー,作成

 

バナーの枠線が太くなりました。

[st-flexbox url=”https://xn--t8j3bz04sl3w.xyz/wordpress/affinger-banner/4808/” fontawesome=”fa-bullhorn” title=”バナーが作れる!” width=”400″ height=”200″ color=”#fff” fontsize=”200″ radius=”30″ shadow=”#424242″ bordercolor=”#039BE5″ borderwidth=”5″ bgcolor=”#ccc” backgroud_image=”https://xn--t8j3bz04sl3w.xyz/wp-content/uploads/2018/06/children-593313_640-2.jpg” blur=”on” left=”” margin_bottom=”0″]

AFFINGERを使えば記事作成中にバナーも作れちゃう!

[/st-flexbox]

まとめ

WordPressのテーマ機能だけでバナー風ボタンが作成出来るって驚愕ですよね。そして調整箇所がとても豊富。もうなんかテーマというよりツール・・

  1. バナーを作成
  2. AFFINGERタグに新規登録
  3. クリック計測

なんて使い方も面白いかも。

 

バナー風ボタンの作成のコツですが、最初は必要な部分だけを調整していくと良いと思います。

 

こだわるとあっという間に時間が経ってしまうので要注意w

OYAKUN
OYAKUN
自分でバナーを作成してみると広告の見方が変わってきますよ

大事WordPressが重い!プラグインを見直すだけで表示速度が4倍に?

オススメWordPressのパーマリンクとpost-id設定は意外と大事という話

コメント

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