こんな悩みに答えます
・バナー風ボックス作りたいんだけど、作り方がわからない
・上手く画像が反映されない
・いろんなサイト見たけどよくわかんない!もっと詳しく!
この記事を書いた人
・ブログ歴4か月の大学生ブロガー。初心者ブロガーの役に立つ情報を発信中!
・Twitter(@Blog624renoru)はこちら!
この記事を読めば、AFFINGER5(アファンガー)でバナー風ボックスを作る方法がわかります。
つまずきポイントもしっかりチェックしていきますので、悩み解決に役立ててください。

もくじ
バナー風ボックスの完成例
画像と同じように、バナー風ボックスを作っていきましょう。
バナー風ボックスを作る方法
タグ > レイアウト > 全サイズ > 左右50%をクリック。
すると下の画像のように表示されます。
黄色と青色の両方にバナー風ボックスを挿入します。
タグ > ボックスデザイン > バナー風ボックス > 基本をクリック。
上の画面に来たかと思います。
これをプレビューしてみましょう。
次に画像と載せたいサイトURLを挿入しましょう。
サイトURL / st-flexbox url="★★★"
画像URL / background image="★★★"
星マークのところにURLを入れてください。
サイトURL取得方法
ワードプレスの投稿一覧を開き、載せたい記事を開きます。
画像のように、パーマリンクをコピーすればOKです。
画像URL取得方法
記事作成画面の左上、メディアを追加をクリック。
次に載せたい画像を選択し、URLをコピーすれば完了です。

それぞれのURLのコピーが終わったら、下のところに挿入して完了です。
サイトURL / st-flexbox url="★★★"
画像URL / background image="★★★"
プレビューしてみると下のような画像の通りです。
バナー風ボックスに、画像が反映されないときの対処法
なんでだよ・・・


画像のURLの時にそのまま、挿入すると画像が反映されないことがあります。
そのまま挿入した場合は、下の画像のようになります。
これを反映すると、画像が挿入されていないことが多々あります。
なので、画像のURLを挿入するときは、ビジュアルからテキストに切り替えてURLを入れましょう。
少し見にくいですが画像URLを貼るところを探してください。
見つかったら、そのまま挿入して完了です。

まとめ:AFFINGER5(アフィンガー)でバナー風ボックスを作る方法
ここまでバナー風ボックスの作り方を解説してきました。
最後に内容をまとめておきましょう。
まとめ
・バナー風ボックスの完成例
・バナー風ボックスを作る方法
・サイトURL取得方法
・画像URL取得方法
・バナー風ボックスに、画像が反映されないときの対処法
バナー風ボックスの使い方はAFFINGER5(アフィンガー)使いの第一歩ですので、マスターしておきましょう。