このサイトはAFFINGER6(β)のテーマを使用しています。

AFFINGER

AFFINGERに標準搭載されたヘッダーのデザイン4種類を紹介

AFFINGER(アフィンガー)のデザインを紹介します。

今回はAFINGERに標準搭載されているヘッダーのデザインをまとめました。サイトの印象を多きく左右するヘッダー。AFFINGERには大きく分けて4種類のヘッダーデザインが用意されています。

お好みのヘッダーを見つけてください!

ちなみにこちらがデフォルトのヘッダーです。

ヘッダー画像の設定(ビフォー)PC
PC
ヘッダー画像の設定(ビフォー)スマホ
スマホ

1、一般的なヘッダー(1枚画像やスライドする画像)ヘッダー画像、画像スライドショー

これは一般的なヘッダーですね。ヘッダー部分に一枚の画像が表示されます。画像にリンクを貼ることも可能です。

ヘッダー画像の設定(アフター)PC
ヘッダー画像を設定した状態(PC)
ヘッダー画像の設定(アフター)スマホ
ヘッダー画像を設定した状態(スマホ)

画像を追加すればスライドショーができます。

ヘッダー画像のスライドショー
ヘッダー画像のスライドショー

設定方法はこちら >>

2、ブラウザ(上部or全体)を一枚画像で覆う基本の"headerエリア"とフルスクリーンの"headerエリア"

こちらはブラウザ上部(ヘッダー全体)を一枚絵で覆うデザインです。大きな画像がインパクトありますね。

普通はロゴ部分やメニュー部分まで画像はヘッダー画像は広がりません。しかしこの機能を使うと、ロゴ部分やメニュー部分にも画像が広げることができます("headerエリア"機能)。

完成:基本の"headerエリア"(キャッチコピーなし)PC
基本の"headerエリア"(キャッチコピーなし)スマホ

また、画像の上に大きな文字やボタンを設置することもできます("ヘッダーコンテンツ"機能)

完成:基本の"headerエリア"(キャッチコピーあり)PC
完成:基本の"headerエリア"(キャッチコピーあり)スマホ

こちらはもう一歩進んでブラウザ全体を一枚絵で覆うヘッダーです。迫力があります。

完成:フルスクリーンの"headerエリア"(キャッチコピーなし)PC
完成:フルスクリーンの"headerエリア"(キャッチコピーなし)スマホ

上と同様に画像の上に文字やボタンを配置できます。

完成:フルスクリーンの"headerエリア"(キャッチコピーあり)PC
完成:フルスクリーンの"headerエリア"(キャッチコピーあり)スマホ

設定方法はこちら >>

3、見せたい記事をスライドさせて大きくアピール!ヘッダー記事スライドショー

今度は記事の紹介をスライド形式で表示するヘッダーです。読んでほしい記事をデカデカとアピールできますね。

ヘッダー記事スライドショー(スライド)

ヘッダー画像の代わりに記事のサムネイルをスライドショー形式で表示。サムネイルの左には記事のタイトルや説明が表示されます(スマホは下部にタイトルが挿入)。動きは"フェードイン"、"右から左"、"左から右"の3種類から選ぶことができます。

表示できるのは任意の記事ではなく任意のカテゴリになります。

こちらはフェードイン・アウトの場合。

ヘッダー記事スライドショー(フェードイン・アウト)

スマホで見るとこんな感じ。

AFFINGER/ヘッダー記事スライドショー(スマホ)
スマホで見たとき

設定方法はこちら >>

4、背景が固定され手前の画像が動くヘッダースライドする透過画像

こちらは1で紹介した"画像スライド"の発展系です。背景が固定され手前の透過画像がスライドします。

AFFINGERの公式サイトでも使われているヘッダー形式ですね。

背景を固定してスライドするヘッダー画像(PC)
背景を固定してスライドするヘッダー画像(スマホ)

設定方法はこちら >>


以上、AFFINGERでできるヘッダーのデザイン例でした。参考になれば幸いです。

AFFINGERを購入する

詳細はこちら

-AFFINGER
-