アフィンガー５（WING）では、トップページの上部（ヘッダーエリアの直下）にバナー風ボックスを４つ設置できる仕様になっています。
アフィンガー管理の中では、「おすすめヘッダーカード」と名付けられています。
とても簡単に設置できるのですが、色の調整等で少しマゴつく人もいると思いますので、設置の手順とコツ等をまとめておきます。
スポンサーリンク
バナー風ボックスとは？
バナー風のボックスとは、「背景画像とリンクとテキスト文字」を一緒にしたものです。
HOMEへどうぞといった昔風のリンクよりも、以下のようなバナー風ボックスにする方が何倍も見栄えが良くなりますよね。
HOME!
アフィンガー５では、こんなバナー風ボックスを超簡単にトップページに並べる機能がついています。
更に、背景画像にボカシを入れて周囲の雰囲気に溶け込ませる事もできます。
以下のような感じです。
その他、背景写真の色を暗くすることもできます。
操作方法については後述しますので、順を追っていきましょう。
バナー風ボックスの設置方法
表示するボックスの数は、１～４つで自由に設定できます。
表示する数に合わせて、自動的にボックスの大きさが調整されるようになっています。
何個設定しても綺麗に収まるのでとても便利ですが、３つで設定すると携帯で見た時に空きスペースが発生します。
ですので、できれば偶数で設定するのがお勧めです。
まずは、アフィンガー５管理画面を開いてください。
step
1おすすめ記事一覧を選択
step
2おすすめヘッダーカードを作成
以下のような画面が表示されるので、好きな画像をアップロードし、テキスト欄に表示する文字を入力し、リンク先URLを記載します。
１番から順番に入力していき、必ずSAVEを押してください。
step
3画像効果を設定する
画像にボカシ等を設定できますので、以下の場所で指示してSAVEします。
以上で完了です。
色の調整
とりあえず、見た目には目的を達成している状態ですが、背景の色を調整したい場合もあると思います。
バナー風ボックス（おすすめヘッダーカード）の背景部分の色は、カスタマイズ画面から変更します。
基本エリア設定の中の（上から２番目）背景色を選び、変更したい色を指定してください。
「header以下のエリア」の背景色と同じ色にすると、全体の継ぎ目がなく綺麗です。
まとめ
バナー風ボックス（おすすめヘッダーカード）は、意外に簡単に設置できますよね。
見た目もかなり変わるので、アフィンガー５を購入した人は使わないと損な機能だと思います。
アフィンガー５には、これ以外にもいくつか見栄えを大きく変える事ができる機能が備わっていますので、また別記事でご紹介していきたいと思います。
にほんブログ村