【AFFINGER5】トップページをオシャレにカスタマイズ！【パララックス効果】

ブロガーさん

テーマにアフィンガー5を使っています。
トップページをオシャレにカスタマイズしたいんですが、どんな風にしたらいいか迷っています。なにかいい案ありませんか？

今回はこんな悩みを解決します！

アフィンガー5はかなり色々なカスタマイズができるのでどんなデザインにするか迷いますよね！
例えばパララックス効果を使ってみるのはどうでしょう？

アンディ

パララックス効果というものをご存知でしょうか。

オシャレなサイトでよく使われている画像の見せ方ですが、アフィンガーではこのパララックス効果をクリックのみで簡単に設定できてしまいます。

今回はそのパララックス効果を設定する方法と、ちょっとした注意点をご紹介します。

パララックス効果ってどんなもの？

視差効果とも言われています。サイトのトップページで良く使われている画像の見せ方ですね。

画面をスクロールすると通常は画像も一緒にスクロールしていきますが、この演出を使うとスクロールの速度と違う速度で画像が動くので読者に『おっ？！なんかオシャレ！』と思わせる事ができます（笑）

言葉だけでは分かりにくいので実際の動きを見ていただく方が早いですね。

パララックス効果。

このような動きを使います。

このサイトは複数の画像をそれぞれ違う速度で動かしていて遠近感を出しています。
パララックスを使うとこんなオシャレなこともできてしますんですね。

設定後のサンプル

アフィンガーで実際に設定すると…

こんな感じになります。

GIFがカクカクですみません（笑）
実際はもっとなめらかに動きます。

タイトル部分に何か隠しておいて、スクロールすると出てくるみたいなデザインにしてみても面白いかもしれません。

AFFINGER5での設定方法

では実際にアフィンガー5での設定方法です。

ワードプレス左メニューの『外観』から『カスタマイズ』をクリックします。

『ヘッダー画像』を選択します。

下にスクロールしていくと『画像を選択』という項目があります。

『画像を選択』をクリックしてヘッダー部分に固定する画像を選びます。

サイズはヘッダーに表示したい任意のサイズでいいと思います。今回はアフィンガーの推奨アイキャッチサイズ（800×450）のものを使いました。

トップページで画像を表示させる大きさにもよるので、ご自身のサイトにあったサイズを探してみてください。

次に下にある『パララックス（視差効果）風にする』にチェックを入れます。

これだけでパララックスの設定はおわりです。

超簡単ですよね（笑）

ただ、アフィンガーのヘッダー部分は色々と設定ができてしまうためすでに他の項目で画像を設定しているとパララックスが働きません。

もし設定しても動かない場合は次の項目でご紹介する場所を確認してみてください。

パララックスが設定できない時の対処

パララックスの設定をしたけどうまく動いてくれない時は、他の項目で画像を選択している場合があります。

アフィンガーで設定できるヘッダーの項目。

今回設定をした『ヘッダー画像』以外に『基本エリア設定』という項目でもヘッダーの編集ができます。

ちょっとややこしいですね…。

アフィンガーのヘッダー部分の階層を分かりやすく説明しているサイトがあります。

ラボだもんで

このサイトから画像をお借りしました。

アフィンガーのパララックスは背景部分に画像を設定しますが、❸や❹のエリアにすでに画像が入っていたりするとパララックスが働きません。

もしパララックス用に設定した画像が反映されない場合、❸と❹に設定されている画像を外します。

❸の『ヘッダー画像エリア』に画像を設定している場合

ヘッダー画像エリアの画像は

で設定できます。

ここに画像を設定している場合は削除しておきましょう。

❹の『headerエリア』に画像を設定している場合

headerエリアの画像は

で設定できます。

ここに画像を設定している場合も削除しておきましょう。

『AFFINGERのトップページをオシャレにカスタマイズ！』のまとめ

アフィンガーはカスタマイズ範囲が広く、トップページだけでも色々な事ができます。

今回ご紹介したパララックス効果もそのうちの一つ。

パララックス効果はオシャレなサイトにはよく使われていますが、個人ブログでやたら凝ったものを使ってしまうとユーザビリティが低下してしまいます。

離脱の原因にもなるので操作しにくいパララックスは避けた方がいいと思います。

その点アフィンガーのパララックスは簡単なものなのでユーザビリティを損なう事もありません。

ちょっとしたポイントにもなるので使ってみてはいかがでしょうか。

最後まで読んで頂きありがとうございます。

アフィンガーは他にもこだわりのデザイン設定ができます。
読者の回遊率を高めるためにもスマホ閲覧時のメニューをオシャレに表示してみませんか？

僕がデモサイトを見て“やってみたい！”と思ったけど、検索してもヒットしなかったので僕がご紹介します。