アフィンガー5 ブログ運営

アフィンガー5(WING)バナー風ボックスの使い方

アフィンガー5(WING)では、バナー風のリンクを設置することができます。

ショートコードによる指示等もある為、初心者には少し難しく感じるかもしれませんので、この記事で分かり易く手順をまとめておきたいと思います。

見栄えが良くなるので、必ず習得しておくべき機能です。

では、早速チャレンジしてみましょう!



バナー風ボックスとは?

アフィンガー5には、タグ機能の中に「バナー風ボックス」という項目があります。

これを使うと、以下のようなバナー風のボックスリンクが設置できます。

自由なタイトル

補足説明も可

 

アフィリエイト先に飛ばすこともできますし、見た目の印象を保ちながら自然にサイトマップやオススメ記事等にアクセスしてもらうことができそうですよね。

サイズ等も自在に変更できるので、かなり使えるツールだと思います。

 

ヘッダー上に重ねることもできるので、やり方を覚えるだけで、見た目のバリエーションがかなり増えます。

応用的な組み合わせについても記事の後半で紹介していきますね。

 

バナー風ボックスの使い方

アフィンガー自体の説明については割愛しますので、知らない方は公式ページをご覧ください。

以下の手順については、クラッシクエディターで作業した場合を前提としています。

 

step
1
ショートコードを設置する

記事編集画面上で、バナー風ボックスを表示させたい場所にカーソルを合わせてください。

次に、タグ内にあるボックスデザインから、「バナー風ボックス」にカーソルを合わせます。

すると、「基本」・「背景なし」・「左寄せ」の3つの表示が出てきます。

 

背景画像を用いる場合には、「基本」を選びます。

写真を使わない時は「背景なし」です。

通常は、「基本」を選ぶことが殆どです。

 

基本を選ぶと、以下のような状態で表示されます。

 

step
2
画像のURLを見つける

バナー風に表示させたい画像をショートコードの中に入れるには、画像のURL(WEB上の住所)が必要です。

まずは、編集画面の上にある「メディアを追加」から使いたい画像を取り込んでください。

 

取り込んだ画像は、ダッシュボードの左側に表示されている「メディア」からもアクセスできます。

使いたい画像を追加したら、メディアライブラリにある対象画像をクリックしてください。

 

画像を表示させた再、右側のウィンドウに「ファイルのURL」又は「リンク先のコピー」として表示されます。

この画面は、プラグインの使用状況によって表示が多少異なると思います。

 

リンク先のコピー欄が表示される場合には、これを使うのが一番手軽です。

URL情報をコピーした状態で、編集画面へ戻りましょう。

 

 

ポイント

URLの表示は、メディアライブラリで画像を選択した時に右下に出る「さらに詳細を編集」をクリックすると表示されます。

 

step
3
ショートコードにURLを設置する

URLをコピーして、以下の位置に貼り付けます。

URLは、「”」のマークの間に挿入(貼り付け)します。

こんな感じでURLを入れる

 

すると、自動的に画像が表示されてしまうと思います。

これは、ワードプレスについている機能が発動している為です。

 

この作業では、画像ではなくURLコードで記載しなければならない為、これを元のコードに戻す作業が必要です。

 

step
URLコードに変換する

画像が表示された状態で、キーボードで『Ctrl+Z』を押してください。

すると、URLコードが文字になって表示されます。

 

この状態で、一度プレビューを確認してみましょう。

画像がバナー風に表示されていればOKです。

 

画像以外の設定方法

画像が設定できたら、表示する文字やリンク先についての設定を行います。

また、バナー風ボックスの大きさ等についてもここで設定します。

設定する方法は、以下の赤表示の場所に必要な情報を入力するだけです。

※青文字部分は、基本的には何も記入しない場所です。

 

 

fontawesomeの設定

フォントアイコンの指定が無い場合には、何も入れなくてOKです。

fontawesome4のクラス名を指定すると、それが反映される仕組みになっています。

 

大きさの設定

バナー風ボックスの大きさは、数字で指定します。

例えば、250×250の大きさであれば、「width=」と「height」=の後に”250”と入力すればOKです。

 

色の指定方法

全ての色指定は、HTMLカラーコードで行います。

(#から始まる6桁以内の数記号を記載)

テキスト色のアイコンを開くと、下部に「カスタム」と表示されますので、これをクリックしてみてください。

以下のような画面になりますので、好きな色を表示させ、赤枠の記号を転記すると簡単です。

 

%やpxの指定については、数字だけを入力すれば調整できますので、プレビューを確認しながら自由に設定してください。

 

説明文の追加

サブタイトル風の説明文を記載すると、更にバナーっぽさが際立ちます。

また、ボタン表示でリンクを貼ることもできます。

 

説明文の場合、指定の場所に文章を入力するだけで終了です。

説明文の文字色は黒色が標準ですが、変更指定したい場合は、テキスト画面にして以下のように記載すると色指定できます。(細字の場合は<strong>を消してください)

</span><span style="color: #ffff"><strong>ブログで知りたいアレコレ</strong></span>

 

ボタン表示をつける

バナー風ボックス内に、ボタン機能を付けるとカッコイイですよね。

説明文を入れる場所にカスタムボタンを設定すると、これが実現できます。

 

タグ機能の中にあるカスタムボタンの中から好きなものを選び、表示させたい場所にショートコードを出現させます。

ボタンの設定については、ほとんどバナー風ボックスの時と同じです。

 

ここに注意

この際、ボタンからリンク先へと飛ばすことになりますので、『flexbox url=』にはURLを設定しないようにしてください。

 

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

ここまでにご紹介した手順を完了すると、以下のようなバナー風ボックスが完成します。

ブロネコ
なかなかイイニャ

Blobuzz Club

ブログで知りたいアレコレ

ホームページを見る

 

横並びで表示させる方法

記事内でバナー風ボックスを表示させる場合、2つを並べて表示したい時もあると思います。

また、ボックスの横に説明文等を設置したいというケースもあるかもしれませんよね。

そんな時、他のショートコードと組み合わせることになります。

 

アフィンガー5では、タグ機能の中に「レイアウト」という項目が用意されています。

%表示で右側と左側の表示比率を選ぶことができますので、好きなものを選んでください。

ここでは、「全サイズ左右50%」を使ったと仮定して説明します。

 

step
1
レイアウト種類を選択する

例えば、全サイズ左右50%では、以下のように表示されます。

step
2
各コンテンツを挿入する

文章を入力する場合は、元々常時されている文字の下の行から入力し、最後にいらない文字を消せばOKです。

最初に表示された文字を消してしまうと、ショートコードが崩れてしまうようです。

バズネコ
文字を消すのは後にするんだニャ
バナー風ボックスの入れ方

説明文を入れるのと同じように、「左側のコンテンツ50%」の下の行にバナー風ボックスを作成します。

右側の青色部分にも、同じようにボックスを作成してください。

 

左右のバナー風ボックスが作成できたら、最初に表示されていた文字(左側のコンテンツ50%等)を消して完了です。

以下のように表示されますので、必要に応じて表示幅等を調整してください。

Blobuzz Club

ブログで知りたいアレコレ

ホームページを見る

Blobuzz Club

ブログで知りたいアレコレ

ホームページを見る

 

 

まとめ

アフィンガー5は、各機能を使いこなせるようにならないと本来の魅力が発揮できない面があります。

色々な機能を試して使いこなすことができれば、投資価値を高めることにも繋がります。

今回のバナー風ボックスについても、やってみると意外に簡単にできますよね。

どんどん使いこなして、アフィンガー5を使いこなしましょう!

今後も、少しずつ細かい設定やショートコードの使い方等をご紹介していきたいと思います。

-アフィンガー5, ブログ運営

Copyright© Blobuzz Club , 2019 All Rights Reserved.