忘れないように自分用にメモ。
アフィンガーでスマホ表示の場合、ヘッダー画像を固定する方法です。
この美クレというサイトをスマホで見ると、ヘッダー画像が固定されています。
前提
ロゴ画像にだけ画像を設定している場合は、今から紹介する方法ではうまいこと反映されません。
できないことはないと思うのですが、よくわかりません。
僕の場合は以下のように設定しています。
| 基本(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ページになるでしょう。
最後に
これ以上にもっとシンプルなやり方とかあるのかもしれません。特に画像設定の部分。
スマホもPCもヘッダー画像入れると、テキストでサイト名出てきちゃったりして・・・で、アフィンガー設定で「サイト名を表示しない」にすると、UI的にはきれいになるけど、今度はh1が消えちゃったりで。
今のところはこれに落ち着きました。