「オシャレなバナーを作りたい！」
「バナーを使ってみたいけど、どうやって作ればいいのかわからない…」
バナーを作るのって思っている以上に難しく、サイトを作り始めた初心者だとなかなか大変なんですよね。
アフィンガーだとはじめからバナー風ショートコードを使って簡単におしゃれなバナーを作成できるので今まで苦労して作っていたのがウソのように楽しくなってきますよ。
バナーを作るのは初心者には難しい！？
おしゃれなサイトを作るためにはバナーを使ってサイト全体を装飾する必要があります。
このバナーを作るのが結構手間で、慣れていないと１つのバナーを作るだけで何時間もかかり後回しになりがちです。
完成したとしてもおしゃれとは程遠い出来になってしまったりもするので、ツールを使って作るのが一般的でしょう。
でも無料バナー作成ソフトだと使いやすいサイトを探すだけでも大変で、見つけたとしてもうまく使いこなせずに他のソフトを新たに探すかもしれません。
有料のソフトは機能性や操作性はすばらしいのですが、月額制だったり高額のソフトだったりするので、本気で作る人でもない限り無理して有料ソフトを使う必要はないでしょう。
もうちょっと簡単にバナーを作ることはできないかと探しているうちにアフィンガー５でバナー風のショートコードを使って誰でも簡単にバナーを作れる機能があるのを知りました。
このバナー風ショートコードを使いこなせると、結構簡単におしゃれなバナーを作ることができるので、シンプルなものでもよければ使った方が絶対にいいです。
ショートコードの意味を理解しよう！
バナー風ショートコードを設置すると以下のショートコードが貼り付けられます。
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]
[/st-flexbox]
このショートコードを使ってバナーを作ることになるんですが、一見するとどのように編集するのかがわからないですよね。
ポイントさえ掴んでおけばそれほど難しいものではありませんので、ひとつずつ見ていきましょう。
[st-flexbox url="リンク先URL" rel="nofollow" target="新しいタブで表示" fontawesome="アイコンの表示" title="タイトル" width="横幅" height="縦幅" color="文字色" fontsize="文字の大きさ" radius="角の滑らかさ" shadow="文字の影色" bordercolor="外枠の色" borderwidth="枠の太さ" bgcolor="背景色" backgroud_image="バナーの画像" blur="ぼかしの有無" left="左寄せ" margin_bottom="バナー下の間隔"]
タイトル下の説明文を入力
[/st-flexbox]
アフィンガーでバナーを作ってみよう！
まずはじめにバナー風ショートコードを呼び出してみましょう。
投稿もしくは固定記事から【タグ】→【ボックスデザイン】→【バナー風ボックス】→【基本】を選択するとショートコードが自動的に書き出されるのでプレビューで見てみるとこのようなバナーになります。
タイトル
これだけだとバナーとしては使いにくいので、カスタマイズをしていきます。
すべてのカスタマイズをすると覚えられないので、まずは最低限必要な部分のみ紹介していきましょう。
今回は例として猫の成長記録というバナーを作ってみます。
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="猫の成長記録" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]
我が家の猫が生まれてから今に至るまでの成長日記
[/st-flexbox]
最初にtitleと説明文を入力しました。
そうすると下のようになります。
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
次にバナーで使用する画像を設定していきます。
事前に使用するバナー画像を準備する必要があるので、画像フリーサイトなどでダウンロードしてください。
今回は下の画像ををバナーとして利用したいと思います。
この画像をそのまま使ってしまうとサイズが合わないのでリサイズします。
画像編集ソフトでもリサイズは可能ですが、ワードプレスでも簡単にサイズを変更する方法がありますので、今回はワードプレスを使って画像サイズを変更していきましょう。
【メディアを追加】で画像をアップロードします。
アップロードすると画面右側に【画像を編集】という項目があるので、こちらをクリック。
画像編集画面で元のサイズを縮小しますが、画像全体を縮小する方法と画像の一部だけ使用する方法がありますので、どちらの方法を使用しても問題ありません。
画像全体を縮小する方法
画像縮尺の変更で新規サイズを入力し、縮尺変更をクリックすると画像全体が指定したサイズに縮小されます。
縦横の比率は自動的に合わせてくれますよ。
画像の一部だけを使用する方法
左側の編集する画像をとりあえず適当にドラッグ＆ドロップ。
そうすると四角の枠が表示されるので、上にあるトリミングのボタン（左端のボタン）をクリックすると指定した枠の大きさにトリミングしてくれます。
サイズを指定したい場合には右側にある『画像のトリミング』の『選択範囲』で指定のサイズを入力します。
指定の数値を入力すると、さきほどの四角の枠が入力したサイズになっているので、残しておきたい部分に枠を合わせておきます。
枠の外がトリミングで削除されるので間違えないようにしましょう。
最後に画像の下にある保存をクリックすると完了です。
画像のURLをコピー
編集した画像のURLをバナー風ショートコードに貼り付けましょう。
メディアの画面でURLをすべてコピーします。
続いてバナー風ショートコードのbackgroud_image=""に先ほどコピーしたURLを貼り付けましょう。
ペーストをすると画像がそのまま配置されてしまいますので、【Ctrl】+【Z】を押すと画像がテキストに変換。
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
いい感じのバナーになりました。
説明文の色が画像と被ってしまい見にくくなってしまったので文字色を変更します。
文字色は通常のテキスト編集と同様に説明文全体を選択して『テキスト色』を変更するだけです。
ついでにバナーのサイズも縮小します。
（300×130にリサイズ）
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
バナーのサイズを変更したい場合にはwidthとheightでサイズの指定をするとバナーが指定のサイズまでリサイズしてくれるので、状況にあわせてその都度変更してください。
紹介しなかったタグの意味
その他の意味は以下の通りになります。
メモ
st-flexbox url
リンク先のURLを入力します。
リンク先のURLをコピー＆ペーストするだけで簡単にリンクすることができます。
アフィリエイトタグはそのまま貼り付けても機能しないのでバナーの中にカスタムボタンを作成して利用したほうがいいです。
rel
リンク先をページランクを渡すかどうかのタグです。
SEOに関する内容になるので割愛しますが、通常は"nofollow"で問題ないでしょう。
target
リンク先を新しいタブで開くかどうかを選択できます。
初期設定では新しいタブを開かないようになっていますが、外部サイトへのバナーであれば新しいタブで開かないと、誘導した先で戻ってこないケースも考えられるので、blankと入れておきましょう。
- 自身のサイト＝空欄でOK！
- よそのサイト＝blankと入力
バナーをクリックするとわかりやすいです。
blankなし時
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
blankあり時
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
fontawesome
タイトルの前にアイコンを表示させることができます。
【タグ】→【ショートコード補助】→【Webアイコン(クラス)】から好きなアイコンを選ぶだけで表示させることが出来ます。
王冠のアイコンを使用
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
メモ
titile
バナーのタイトルを入力します。
文字の色や大きさはcolorで指定の色を入力するかカラーコードを打ち込めば色を変更できるし、fontsizeに数値を入力で文字の大きさを指定することが可能です。（説明文には反映されません）
width,height
横幅と縦幅を調整したい時に使用します。
バナー風ボックスでは空欄のままだと縦幅は適切なサイズですが、横幅はコンテンツいっぱいになっているので、サイズが大きいと感じたら数値を入力して微調整しましょう。
トリミングした画像以下の設定にしてしまうとバナーの背景が崩れてしまいますので、バナーのサイズをもとに戻すか、widthの数値を上げて対応してください。
- width＝横の幅
- height＝縦の幅
color,fontsize
タイトルの色と文字の大きさを指定します。
colorは文字の色を入力するかカラーコードを使って色の変更することができ、fontsizeは文字の大きさを数値を入力して変更することができます。
文字色の指定は『blue(青)』や『red(赤)』のように英語で指定する以外に、カラーコードで色の指定をすることも出来るので、細かい色にしたい時に便利です。
- color＝タイトルの文字色
- fontsize＝タイトル文字の大きさ
radius
バナー風ボックスの角を丸くすることができます。
数値を大きくすればバナー全体が丸くなって可愛らしいバナーに早変わり！
radius="10"の場合
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
radius="50"の場合
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
shadow
タイトルの文字を縁取りすることができます。
タイトルの文字色と同様に色の入力するかカラーコードを指定することで設定が可能です。
shadowにredを指定した場合
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
bordercolor,borderwidth
bordercolor,borderwidth
bordercolor,borderwidth
バナーの枠色と枠の太さを指定する時に使います。
空欄のままだと枠線自体がありませんので、バナーを目立たせたい場合に使うと良いでしょう。
枠の色は色指定かカラーコードを入力し、枠の太さは数値を入力で数字が大きくなるほど枠線が太くなります。
- bordercolor＝枠の色
- borderwidth＝枠線の太さ
bgcolor
バナーの背景色を選びます。
この記事では画像を使ってバナーを作成しているので、bgcolorは使うことができませんが、画像を使わず色だけでバナーを作る場合は色を指定するだけで簡単に背景色付きのバナーが完成します。
背景色が黒の場合
タイトル
メモ
backgroud_image
バナーの背景画像URLを入力します。
ここにアップロードした画像を入力するとバナーの背景画像として利用することできます。
blur
バナー画像をぼかしをいれるかどうかを選択します。
通常はonになっているので、マウスオーバーした時にぼかしが解除されます。
最初からぼかしなしにする場合はonの文字を削除して空欄にしておくとぼかしなしのバナーになりますよ。
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
left
タイトルと説明文を左寄せにします。
通常は中央寄せになっていますが、left="on"に変更すると左寄せになります。
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
margin_bottom
バナー下のスペースをどのくらい空けておくか指定できます。
初期では0になっているので、バナーの後に文章を入力するとバナーと文字がくっついてしまいます。
margin_bottomに数値を入力すればバナーと文字の空間を広げることができますよ。
margin_bottom="0"の場合
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
ここに文章が入ります。
margin_bottom="50"の場合
猫の成長記録
我が家の猫が生まれてから今に至るまでの成長日記
ここに文章が入ります。
他にもカスタマイズで対応する方法とは？
バナー風デザインの可能性はたくさんあります。
バナーにカスタムボタンを挿入
たとえばバナーの中にカスタムボタンを挿入することだってできちゃうんです。
やりかたはバナーの作り方は先ほど同様の手順で、説明文を入力する箇所にカスタムボタンのショートコードを入力するだけで簡単にできます。