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を挿入

の順で行っていきます。

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」に指定値を入力します。

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

affinger,バナー,作成

 

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

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

に設定してみました。

affinger,バナー,作成

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

affinger,バナー,作成

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

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

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

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

 

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

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

 

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

affinger,バナー,作成

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

affinger,バナー,作成

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

affinger,バナー,作成

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

affinger,バナー,作成

アヒルン
アヒルン

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

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

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

次のページへ >

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

OYAKUN

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

© 2020 OYAKUDACHI.XYZ