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