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

トップページに4つのバナー風ボックスを配置する方法

アフィンガー5(WING)では、トップページの上部(ヘッダーエリアの直下)にバナー風ボックスを4つ設置できる仕様になっています。

アフィンガー管理の中では、「おすすめヘッダーカード」と名付けられています。

とても簡単に設置できるのですが、色の調整等で少しマゴつく人もいると思いますので、設置の手順とコツ等をまとめておきます。

 

スポンサーリンク

バナー風ボックスとは?

バナー風のボックスとは、「背景画像とリンクとテキスト文字」を一緒にしたものです。

HOMEへどうぞといった昔風のリンクよりも、以下のようなバナー風ボックスにする方が何倍も見栄えが良くなりますよね。

 

HOME!

 

アフィンガー5では、こんなバナー風ボックスを超簡単にトップページに並べる機能がついています。

 

更に、背景画像にボカシを入れて周囲の雰囲気に溶け込ませる事もできます。

以下のような感じです。

 

その他、背景写真の色を暗くすることもできます。

操作方法については後述しますので、順を追っていきましょう。

 

バナー風ボックスの設置方法

表示するボックスの数は、1~4つで自由に設定できます。

表示する数に合わせて、自動的にボックスの大きさが調整されるようになっています。

何個設定しても綺麗に収まるのでとても便利ですが、3つで設定すると携帯で見た時に空欄が発生します。

できれば偶数で設定するのがお勧めです。

まずは、アフィンガー5管理画面を開いてください。

 

step
1
おすすめ記事一覧を選択

 

 

 

 

 

step
2
おすすめヘッダーカードを作成

以下のような画面が表示されるので、好きな画像をアップロードし、テキスト欄に表示する文字を入力し、リンク先URLを記載します。

1番から順番に入力していき、必ずSAVEを押してください。

 

step
3
画像効果を設定する

画像にボカシ等を設定できますので、以下の場所で指示してSAVEします。

 

以上で完了です。

ブロネコ
アッという間だニャー

 

色の調整

とりあえず、見た目には目的を達成している状態ですが、背景の色を調整したい場合もあると思います。

バナー風ボックス(おすすめヘッダーカード)の背景部分の色は、カスタマイズ画面から変更します。

 

基本エリア設定の中の(上から2番目)背景色を選び、変更したい色を指定してください。

 

 

 

 

 

 

 

「header以下のエリア」の背景色と同じ色にすると、全体の継ぎ目がなく綺麗です。

 

まとめ

バナー風ボックス(おすすめヘッダーカード)は、意外に簡単に設置できますよね。

見た目もかなり変わるので、アフィンガー5を購入した人は使わないと損な機能だと思います。

アフィンガー5には、これ以外にもいくつか見栄えを大きく変える事ができる機能が備わっていますので、また別記事でご紹介していきたいと思います。

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

Copyright© Blobuzz Club , 2019 All Rights Reserved.