プラグイン概要

WEBサイトで、スクロールをしても画面の上部に固定されている要素を表示させているものがあります。 そのような要素を簡単にWordPress サイトに設置できるプラグインが Sticky Menu, Sticky Header (or anything!) on Scroll です。 サイトでの告知や重要事項の表示、クリックしてほしい情報などをスティッカーを使って表示しておけばユーザにアピールすることができます。 メニューだけでなく様々なタイプの要素に適用することができます。

このページでは Sticky Menu の基本的な使い方を紹介します。

---

インストール方法

まず、WordPress のダッシュボード画面を開きます。

1. ダッシュボード左側のメニューから「プラグイン」を選択します
2. 表示されたメニューから「新規追加」を選択します

1. 表示された検索画面のキーワード欄に「Sticky Menu, Sticky Header (or anything!) on Scroll」と入力します
2. 表示された検索結果の Sticky Menu, Sticky Header (or anything!) on Scroll の情報を確認します
3. 「今すぐインストール」ボタンをクリックします

1. プラグインのインストールが完了すると「有効化」ボタンが表示されるので、このボタンをクリックします

1. 有効化が完了するとプラグイン一覧が表示されるので「Settings」をクリックします

以上で Sticky Menu のインストールが完了し、設定画面が表示されます

---

日本語化

Sticky Menu は日本語化されていませんので、インストールしただけでは上記のように英語のメニューになっています。
英語での使用に違和感の無い方はこのまま使用しても問題無いと思います。

日本語で使用したい方は、日本語データを販売していますのでこちらを適用してからご使用ください。

日本語化ファイルを適用すると以下のように日本語メニューで設定等が行えるようになります

これ以降は日本語化後のメニューを使って Sticky Menu の使い方説明を行っていきます。

---

Sticky Menu の使い方

まずはシンプルに何かを画面に固定してみたいと思います

画像中の番号順に説明をします。

1. ダッシュボード左側の「Sticky Menu」をクリックして設定画面を表示します
2. 「スティッキーエレメント」の欄に「.sticker-element」と入力します。先頭のドットを忘れないようにします。

「変更内容を保存」をクリックして設定を保存します

次に記事の投稿を作成します（固定ページでも良いです）

投稿の編集画面で以下の通り操作してみてください

1. 固定したい要素を追加します。上記の例の場合は画像を固定要素としています。
2. ブロックの「高度な設定」をクリックして表示します
3. 「追加CSSクラス」の欄に先ほど設定で指定した「sticker-element」を入力します。ここは先頭にドットを付けないことに注意してください
4. スクロールできるように無理やり長い文章をいれておきました
5. 「プレビュー」をクリックして投稿のプレビュー画面を表示します

1. プレビューが表示されたら画像が上部に隠れるぐらいスクロールをしてみます

画像が上部に来たらその場で固定されて後ろの文章だけがスクロールするようになりました

以上で基本の設定と確認は完了です。

要素の固定は無事にできましたが、上部ギリギリに張り付いてしまうため見栄えがよくありません。設定を変更して余白をあけてみます

1. Sticky Menu の設定を開きます
2. 画面上部と固定要素との間の余白をピクセル単位で入力します

「変更内容の保存」をクリックして設定を保存し、再度投稿のプレビュー画面をみてみましょう

1. 100ピクセル分の余白を残して固定されるようになりました

モバイルなどの小さな画面では固定させないことも可能です

1. 設定画面で「画面が小さい場合は固定しない」欄に数値を入れると、その数値より小さな幅の画面では固定しなくなります。モバイルなどの小さな画面で要素が残ってしまうとユーザビリティが落ちてしまうのでここで適切な数値を指定しておきましょう。
2. 大きな画面で固定したくない場合は「画面が大きい場合は固定しない」欄に数値を入れておきましょう

最後にもうひとつオプションを紹介します。要素を固定するが、これ以上は固定せずにスクロールをしてほしいという場合があります。例えばコンテンツ欄は固定で残っておいて欲しいがコメント欄には残らずに消えて欲しい、などという場合です。

1. 「高度な設定」をクリックし、高度な設定を表示します
2. 「プッシュアップエレメント」の欄にこれ以上は固定して欲しくない要素を指定します。例ではコメント欄のクラス名を指定しています

「変更内容を保存」をクリックして設定を保存し、投稿のプレビュー画面を再度表示してみます

固定していた画像がコメント欄に持ち上げられるようにスクロールし始めました

以上で Sticky Menu の使い方の解説は終了です。
Sticky Menu の日本語化はこちらをご確認ください。