AFFINGER(アフィンガー)のデザインを紹介します。
今回はAFINGERに標準搭載されているヘッダーのデザインをまとめました。サイトの印象を多きく左右するヘッダー。AFFINGERには大きく分けて４種類のヘッダーデザインが用意されています。
お好みのヘッダーを見つけてください！
ちなみにこちらがデフォルトのヘッダーです。
１、一般的なヘッダー(１枚画像やスライドする画像）ヘッダー画像、画像スライドショー
これは一般的なヘッダーですね。ヘッダー部分に一枚の画像が表示されます。画像にリンクを貼ることも可能です。
画像を追加すればスライドショーができます。
２、ブラウザ(上部or全体)を一枚画像で覆う基本の"headerエリア"とフルスクリーンの"headerエリア"
こちらはブラウザ上部(ヘッダー全体)を一枚絵で覆うデザインです。大きな画像がインパクトありますね。
普通はロゴ部分やメニュー部分まで画像はヘッダー画像は広がりません。しかしこの機能を使うと、ロゴ部分やメニュー部分にも画像が広げることができます("headerエリア"機能)。
また、画像の上に大きな文字やボタンを設置することもできます("ヘッダーコンテンツ"機能)
こちらはもう一歩進んでブラウザ全体を一枚絵で覆うヘッダーです。迫力があります。
上と同様に画像の上に文字やボタンを配置できます。
３、見せたい記事をスライドさせて大きくアピール！ヘッダー記事スライドショー
今度は記事の紹介をスライド形式で表示するヘッダーです。読んでほしい記事をデカデカとアピールできますね。
ヘッダー画像の代わりに記事のサムネイルをスライドショー形式で表示。サムネイルの左には記事のタイトルや説明が表示されます(スマホは下部にタイトルが挿入)。動きは"フェードイン"、"右から左"、"左から右"の３種類から選ぶことができます。
こちらはフェードイン・アウトの場合。
スマホで見るとこんな感じ。
４、背景が固定され手前の画像が動くヘッダースライドする透過画像
こちらは１で紹介した"画像スライド"の発展系です。背景が固定され手前の透過画像がスライドします。
以上、AFFINGERでできるヘッダーのデザイン例でした。参考になれば幸いです。