スクロールしても常に表示される固定式ヘッダーを作るプラグイン「Fixed And Sticky Header」
公開日：2017年2月19日 デザイン
文字で説明するよりも実際に見てもらった方がイメージがつかみやすいかも・・・ということで、
のテストサイトで表示しているのがこのプラグイン。
下の方にスクロールしていくと、黒背景に白文字のヘッダー部分が常に表示されてますね。これが「Fixed And Sticky Header」プラグインで表示している追従型ヘッダーです（閲覧時に外していたらごめんなさい）。
この固定式ヘッダーは結構ポータルサイトなどで使われている機能。会社名やサイト名を常に表示しておくことで認知度を上げる効果が期待できるプラグインです。
【Fixed And Sticky Header】プラグインの基本的な機能・できること
- スクロールしても常に表示されるヘッダーを作成する
- 表示するヘッダーはサイトのheader部分でもオリジナルのdiv要素でもOK
この記事を参考にプラグインの導入をする際以下に留意ください
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。
【Fixed And Sticky Header】プラグインの設定画面や表示の日本語化と翻訳
【Fixed And Sticky Header】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます
【Fixed And Sticky Header】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordPressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。
インストール方法の詳しい解説は
を参照ください
ダッシュボードから「設定」→「Fixed Header」を選択して設定します
項目は
だけとシンプルですから簡単に設定できます。
【Fixed And Sticky Header】プラグインの基本的な使い方
通常は#headerを選択してヘッダー要素にこのプラグインでの色などを適用したヘッダーを表示するようにするのですが、スライダーなどをヘッダーに入れている場合には、追従する画面自体が大きすぎて本文が見にくくなってしまうことがあります。
そのような場合には別でdiv要素を設定するか、header要素の下にスライダーを挿入することで解決できます。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】
