Lightningでヘッダーを自作する
Lightningには豊富な標準ヘッダーが備わっていますが、「Lightning Block Template Parts」機能を使うことで、レイアウトを大きく変えた自作のヘッダーに変更することもできます（有償のVektor Passport利用が必要です）。
また、自作ヘッダー用テンプレートも「VK パターンライブラリ」に取りそろえられており、スクロールにそのまま追従するヘッダーも容易に作成できるのがありがたいところです。
ただ、標準ヘッダーのように「スクロールすると一度見えなくなるが、後から再表示されて追従してくるヘッダー」はVKパターンライブラリには（今のところ）ありません。
そこで、パターンライブラリのテンプレートをベースに、再表示・追従型ヘッダーを試作してみました。テンプレートのデザインそのままでよければ、思いのほかすぐできます。
テンプレートをLightning Block Template Partsに取り込む
まず、VKパターンライブラリの検索機能を使い、パターンカテゴリー「ヘッダー」で絞り込みを行います。
とりあえず試してみるなら、固定タイプの「ヘッダー_全幅_ナビと電話番号&お問い合わせボタン」を使用すると無難です。シンプルな構成ですが、PC・モバイル用の表示が画面サイズで制御され、一定のサイズ以下なら自動でハンバーガーメニューに推移してくれます。
「このパターンをコピーする」ボタンを押したら、WordPressダッシュボードの「Lightning Block Template Parts」で「投稿を追加」を選びます。区別しやすい題名をつけたら、先ほどのデータを本文エリアに貼り付けましょう。
ヘッダーを固定表示ブロック内に複製する
まず、コピー後のグループ（「ヘッダーアウター」等のグループ名がついていると思います）の後に「固定表示」ブロックを作成します。
次に、その固定表示ブロックの中に、コピーしてきたグループをもう一つ貼り付けてください。
その後、固定表示ブロックを以下の通りに設定します。
表示タイプ：スクロールしたら表示
固定位置：上
表示するタイミング：200px
タイマー設定（非表示にするまでの秒数）：0
これで公開・保存すれば、事前準備は完了です。
ヘッダーをBlock Template Partsに変更する
WordPressのカスタマイズ画面で、「Lightning ヘッダー設定」に進みます。
その後、「Block Template Parts」のリストから、先ほど作成したパーツを選んでください。
あとは「公開」ボタンを押して設定を保存すれば、
①初期状態ではヘッダーが上部に固定されており、
②スクロールすると見えなくなるが、
③少し下に画面を読み進めると再表示される
ヘッダーの完成です。
後から再表示される方のヘッダーアウターは、背景色の透明度を上げれば半透過型のメニューにすることもできます。
問題点は、この方法だと「上からすっとメニューが降りてくる」ヘッダーにはできない、ということです。
試してみていただけると分かりますが、メニューが再表示されるときにはフェードインしてきます。そこさえ妥協できるなら、悪くないカスタマイズではないでしょうか。
なぜか下に空白ができるときは
Lightning Block Template Partsをヘッダーに使うと、なぜかヘッダーの下に余計なスペースができることがあります。
この場合、使っているパーツの一番下に、空白の「段落」ブロックが入ってしまっている可能性が大です。油断するとすぐに差し込まれてくるのでご注意ください。見つけ次第、BackSpaceキー等で削除してしまいましょう。
学而図書ウェブデザイン室について
学而図書の裏メニュー「学而図書ウェブデザイン室」は、もともと代表である笠原が知人・身内向けとして密やかに提供してきたホームページ制作・運用代行サービスです。
「予算が厳しい」「中身が決まっていない」「フィードバックする時間がない」「サーバーの管理は難しい」等々、それぞれのご事情に寄り添いつつ、起業直後の方から学校法人・各種団体まで、思いのほか多くの皆様にご利用いただいてまいりました。
学而図書は、事業であれ教育であれ、優れた実践の成果を散逸させることなく、本やウェブサイトといった媒体へと昇華させて人間社会に投げ込むことこそ最も重要な務めであると考えています。
偶然この記事をご覧になり、ちょうどホームページ制作が進まずお困りで、零細出版でもいいから話をしてみたい、という稀有な方がいらっしゃいましたら、ご注文とは関係なくお気軽にご連絡ください。オンラインでのご相談でよろしければ無料で承ります。
