AFFINGERの使い方 WordPressの設定

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

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

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

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

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

affinger,バナー,作成

ポイント

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

affinger,バナー,作成

🔽

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

 

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

バナーが作れる!

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

詳しくはコチラ

 

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

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

affinger,バナー,作成

注意ポイント

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

 

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

affinger,バナー,作成

🔽

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

バナーが作れる!

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

 

バナーの角を丸くする

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成🔽

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

バナーが作れる!

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

 

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

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

ポイント

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

🔽

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

バナーが作れる!

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

 

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

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成🔽

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

バナーが作れる!

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

自動カウント!?
affinger,自動カウント,使い方
AFFINGER自動カウント機能の使い方。番号付与がガチで捗る

見出しの番号を自動カウントで付与出来たら・・ ライティングが捗りますよね(^^)   今回はAFFINGER(WING)の新機能「カウント数の自動表示」機能をご紹介いたします。 この機能のス ...

続きを見る

まとめ

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

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

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

 

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

 

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

 

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

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

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

  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

Copyright© OYAKUDACHI.XYZ , 2019 All Rights Reserved.