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

バナーにリンクボタンを挿入する

AFFINGERでバナーボックスにリンクボタンを挿入するには、設置したい位置で「タグ > その他パーツ > カスタムボタン > 各ボタン」の順に選択します。

affinger,バナー,作成

分かりづらいので実際にやってみます。

 

説明文の下にリンクボタンを設置する

例えば赤枠の部分にリンクボタンを設置する場合は、

affinger,バナー,作成

 

説明文の下で「タグ > その他パーツ > カスタムボタン (> 各ボタン)」と選択。

affinger,バナー,作成

 

すると説明文の下にボタンコードが挿入されます。プレビューすると・・

affinger,バナー,作成

OYAKUN
OYAKUN
今回は「詳しくはコチラ」ボタンを使いました。
 

説明文の下にボタンが設置出来ました。

affinger,バナー,作成

ポイント!
同様に説明文の上にボタンを挿入することも可能です。
アヒルン
アヒルン

ほぼ完成だね!

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

そしたらボタンにリンクを設置しよう。

 

ボタンにリンク先を設置する

ボタンにリンクを設置するには、ボタンコードの「st-mybutton url=””」にリンク先URLを挿入します。

affinger,バナー,作成

 

今回は本記事のURLを挿入してみました。

affinger,バナー,作成

 

実際に作成したバナーはこんな感じ↓

[st-flexbox url=”” fontawesome=”” 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]

 

ボタンからリンク先が確認出来ましたか?

 

実はこのバナーボックス、さらに自分好みにカスタマイズ可能です。

コメント

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