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をヘッダーに使うと、「なぜかヘッダーの下に余計なスペースができる」ことがあります。
この場合、使っているパーツの一番下に、空白の「段落」ブロックが入ってしまっている可能性が大です。油断するとすぐに差し込まれてくるのでご注意ください。
学而図書ウェブデザイン室について
学而図書の裏メニュー・ウェブデザイン室は、もともと代表・笠原の知人・身内向けとして密やかに存在してきたホームページ制作・運用代行サービスです。
「予算が厳しい」「中身が決まっていない」「フィードバックする時間がない」「サーバーの管理は難しい」等々、それぞれのご事情に寄り添いつつ、起業直後の方から学校法人・各種団体まで、思いのほか多くの皆様にご利用いただいてまいりました。
私自身は、TCD AWARD2023で第4位をいただいた経験もあるとはいえ、普段は本の編集や組版を主に手掛けている身です。専門職の方と比べれば技量は劣るはずですが、案外お役に立てているのかもしれません。ありがたいことです。
偶然この記事をご覧になり、ちょうどホームページ制作が進まずお困りで、零細出版でもいいから話をしてみたい、という稀有な方がいらっしゃいましたら、何かのご縁ですのでお気軽にご連絡ください（オンラインでのご相談は、60分くらいまでなら無料で承ります）。
また、WordPressの利用が主ですが、制作内容によってはWix・Studioなどのツールにも対応可能です。「金額はこれが限度一杯」「文章を書ける担当者がいない」といった切実なお悩みにも、「それでは仕様を削りまくってどうにかしましょう」「リーフレットレベルなら、AIが激安で作ってくれるところもありますよ」など、生身の人間ならではの解決策をご提案できるのではないかと思います。
