WING(AFFINGER5)

WING(AFFINGER5)でスマホヘッダを上部固定で表示する

2019年6月19日

ブログのサイト名が載っているヘッダ部分がありますよね。

当ブログだと「40歳でフリー転身」という文字がある部分です。

このヘッダですがスマホで見たときにスクロールするとこのヘッダ部分が隠れてしまいます。

隠れるというか一番上に行ってしまいます。

とま
スクロールしても常にヘッダを表示してぇっす!

ということで対応しました。

ちなみにひそかにTwitterをやっているんですが(ほぼ見るだけ)、有名なマクリンさん(@Maku_ring)のツイートに「ヘッダ固定した方がええで」的なものがあって気になっておりました。

これですね。

スマホビューのときはヘッダ固定のほうがいいとのこと。

さっそくやってみなければ。

とま
簡単にできるんかなぁ。

と思ってたらWING(AFFINGER5)だとアッサリ実現できました。

さすがAFFINGER!

ワードプレスの管理画面でチェックボックスにチェックを入れるだけ

ワードプレスの管理画面で「カスタマイズ」を選択します。

ワードプレスの管理画面で「カスタマイズ」を選択

次に「[+]メニューのカラー設定」を選びます。

「[+]メニューのカラー設定」を選択

「スマホスライドメニュー」を選びます。

「スマホスライドメニュー」を選択

「表示パターンB(スクロール追尾)」のチェックボックスにチェックを入れて上の公開ボタンを押します。

「表示パターンB(スクロール追尾)」のチェックボックスにチェック!

設定はこんだけです!

スクロール中はヘッダが隠れ、スクロールをちょいと戻すとヘッダが出てくる

ヘッダは常に表示されるわけではないです。

下にスクロールしているときはこんな感じで隠れます。

普通な感じ。

ヘッダは常に表示されるわけではなく、下にスクロールしたときは隠れます。

スクロールをちょこっと上に戻したときにピロっと表示される感じで固定されます。

スクロールを上に少し戻すとヘッダが現れる!

隠れたり表示したりを自動で行ってくれます。

個人的には完全固定よりこっちのほうがイイ気がしますね。

なんにせよ

だらだらとブログを続けているんですが、最近はアクセスも特に伸びてこずの状態でした。

とま
ちょっとアカンなぁ

と思い始めてたのでまずは見た目から改善!(記事追加よりも!)

スマホでのヘッダ部分固定は地味に効いてるような気がします。

直帰率がすこし減ったような・・・?

ヘッダを固定することでサイト名も覚えてもらいやすいかもしれません。

これからもちょっとずついじっていこうと思います!

WING(AFFINGER5)のテーマがあればワードプレス管理画面のカスタマイズから簡単にヘッダ固定の設定ができます。

ぜひお試しあれ。

関連記事
WING(AFFINGER5)のおすすめヘッダーカードで直帰率を下げる!

続きを見る

  • この記事を書いた人

とま

1977年生まれ。大阪在住。フリープログラマ。1人の妻、2人の娘と同居。 2018年に独立。2021年にマイクロ法人設立。 仕事の時間を半分にしたいなぁ。 プロフィールへ

-WING(AFFINGER5)