AFFINGER5 ブログ運営

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

 

こんな悩みに答えます

・バナー風ボックス作りたいんだけど、作り方がわからない

・上手く画像が反映されない

・いろんなサイト見たけどよくわかんない!もっと詳しく!

 

この記事を書いた人

・ブログ歴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(アフィンガー)使いの第一歩ですので、マスターしておきましょう。

 

 

-AFFINGER5, ブログ運営

© 2020 renolog Powered by AFFINGER5