AFFINGERの使い方 WordPressの設定

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

更新日:

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

affinger,バナー,作成gif

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

 

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

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

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

こんな方におすすめ

  • AFFINGERのWING最新版を使ってる人
  • バナーボックスの使い方を知りたい人
  • バナーボックスをカスタマイズしたい人

注意

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

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

早速作ってみました↓

え?AFFINGERでバナー作成?

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

詳しくはコチラ

 

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

 

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

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

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

アヒルン
出来た!って、これじゃあシンプル過ぎw
これはただのフォーム。少しずつ変更していこう。
うちゅうじん

 

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

 

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

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

 

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

 

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

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

アヒルン
おお、少しそれっぽくなってきたね!
では背景に画像を設定してみよう。
うちゅうじん

 

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

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

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

の順で行っていきます。

 

step
1
画像を準備する

先に画像を準備します。

affinger,バナー,作成,300

 

oyakun
画像の大きさは300〜400pxくらいが個人的にオススメです。

 

step
2
メディアを追加して画像URLを取得

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

 

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

 

step
3
バナーボックスに画像URLを挿入

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

じゃ〜ん。

affinger,バナー,作成

アヒルン
おお〜それっぽいのが出来た!でも画像の右端が・・
だな。こんな時はバナーの大きさを指定してあげよう。
うちゅうじん

 

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

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

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

affinger,バナー,作成

 

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

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

に設定してみました。

affinger,バナー,作成

🔽

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

affinger,バナー,作成

 

注意

バナー画像のボカシは仕様です。「blur="on"」を「blur=""」にすることでボカシはなくなります。

参考:バナー風デザインを作成するショートコード

アヒルン
いいね!綺麗になってきた!ただ画像の色と重なって説明文が見づらいかな・・
じゃあ説明文(サブコピー)のフォントカラーも変えてみよう。
うちゅうじん

 

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

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

 

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成

🔽

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

affinger,バナー,作成🔽

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

affinger,バナー,作成

アヒルン
説明文がすごく読みやすくなったね!ところでリンクボタンって付けられるの?
モチロン!既存の機能ですぐに可能だ。
うちゅうじん

次のページへ >

広告と関連記事


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

oyakun

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

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.