アフィンガー(WING)でヘッダー画像を上部固定する方法【スクロールでも常時表示】

投稿日:2019年5月23日 更新日:

忘れないように自分用にメモ。

アフィンガーでスマホ表示の場合、ヘッダー画像を固定する方法です。

例:美クレ | 30代40代クレンジングおすすめランキング

この美クレというサイトをスマホで見ると、ヘッダー画像が固定されています。

前提

ロゴ画像にだけ画像を設定している場合は、今から紹介する方法ではうまいこと反映されません。

できないことはないと思うのですが、よくわかりません。

僕の場合は以下のように設定しています。

基本(PC) スマホ 備考
ロゴ画像 入れる 入れない スマホの「モバイル用ロゴ(又はタイトル)を使用する」にはチェック入れる
ヘッダー画像 入れない 入れる -

さらにアフィンガー設定画面「ヘッダー」項目で、ヘッダー画像へのリンクURLを設定しておきます。

 

方法

今回参考にさせてもらったのは、以下サイトさんです。

手順1 CSSの追加

以下をCSSに追加します。

/*--------------------------------------
スマホヘッダーメニュー固定
--------------------------------------*/

@media only screen and (max-width: 767px) {

header {
position: fixed;/*ヘッダーを固定*/
z-index: 9999;/*一番前に表示されるように設定*/
top: 0;/*画面一番上で固定*/
width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/
background-color: #ddd;/*背景色を指定*/
}

/*ヘッダーの高さだけコンテンツを下げる*/
body {
margin-top: 40px;/*ヘッダーと同じ高さのマージンを追加*/
}
}

@media only screen and (max-width: 767px)ってのは、スマホだけに適用しますよ~っていう指示ですね。

手順2 目次のズレ調整

ヘッダー固定されると、目次のスクロールがズレます。

TOC(Table of Contents Plus)プラグインを使っている場合は、設定画面の「スムーズ・スクロール上部余白」で調整できます。

ヘッダー画像の縦と同じくらいの長さ(px)で入れてみて、あとは実機見ながら数値調整というのがベスト。

手順3 ヘッダーにURL設定

アフィンガーの設定画面「ヘッダー」→「ヘッダー画像のリンク先URL:」に飛ばしたいURLを入力。

まあ普通は、TOPページになるでしょう。

 

SPONSORED

最後に

これ以上にもっとシンプルなやり方とかあるのかもしれません。特に画像設定の部分。

スマホもPCもヘッダー画像入れると、テキストでサイト名出てきちゃったりして・・・で、アフィンガー設定で「サイト名を表示しない」にすると、UI的にはきれいになるけど、今度はh1が消えちゃったりで。

今のところはこれに落ち着きました。

SPONSORED

-仕事

Copyright© ぼんぼりーに , 2019 All Rights Reserved.