【徹底解説！】AFFINGER5（アファンガー）でバナー風ボックスを作る方法

この記事を書いた人

この記事を読めば、AFFINGER5（アファンガー）でバナー風ボックスを作る方法がわかります。

つまずきポイントもしっかりチェックしていきますので、悩み解決に役立ててください。

初心者の方でもマネするだけで出来ますよ！

バナー風ボックスの完成例

画像と同じように、バナー風ボックスを作っていきましょう。

バナー風ボックスを作る方法

タグ　＞　レイアウト　＞　全サイズ　＞　左右50％をクリック。

すると下の画像のように表示されます。

黄色と青色の両方にバナー風ボックスを挿入します。

タグ　＞　ボックスデザイン　＞　バナー風ボックス　＞　基本をクリック。

上の画面に来たかと思います。

これをプレビューしてみましょう。

次に画像と載せたいサイトURLを挿入しましょう。

星マークのところにURLを入れてください。

サイトURL取得方法

ワードプレスの投稿一覧を開き、載せたい記事を開きます。

画像のように、パーマリンクをコピーすればOKです。

画像URL取得方法

記事作成画面の左上、メディアを追加をクリック。

次に載せたい画像を選択し、URLをコピーすれば完了です。

画像がない場合は、ファイルをアップロードから画像を取得しよう。

それぞれのURLのコピーが終わったら、下のところに挿入して完了です。

プレビューしてみると下のような画像の通りです。

バナー風ボックスに、画像が反映されないときの対処法

ちゃんとやったはずなのに、画像が反映されていなかった！

なんでだよ・・・

対処法があるから、落ち込まないで！

画像のURLの時にそのまま、挿入すると画像が反映されないことがあります。

そのまま挿入した場合は、下の画像のようになります。

これを反映すると、画像が挿入されていないことが多々あります。

なので、画像のURLを挿入するときは、ビジュアルからテキストに切り替えてURLを入れましょう。

少し見にくいですが画像URLを貼るところを探してください。

見つかったら、そのまま挿入して完了です。

プレビューするとちゃんと画像が反映されますよ

まとめ：AFFINGER5（アフィンガー）でバナー風ボックスを作る方法

ここまでバナー風ボックスの作り方を解説してきました。

最後に内容をまとめておきましょう。

バナー風ボックスの使い方はAFFINGER5（アフィンガー）使いの第一歩ですので、マスターしておきましょう。