![](https://cxg-design.jp/wp-content/uploads/2024/03/08e4a37d18dbb6ee3bf057fb4f94d6b7-1.png)
Stickyプラグイン「Fixed Widget」でスティッキーバナーを作成
Sticky(スティッキー)とは、サイドバーのバナーやタグなどが、スクロールしても指定の位置で止まるようにする機能です。今回は、プラグインFixed Widgetで、スティッキーバナーを作成します。
今回のDEMOは、右サイドバーのバナー3つの内、一番下のピンクバナーのみが固定されるようにしました。SPでは、1 カラムになり、コンテンツの下に配置され、固定されません。左カラムの高さに合わせて、スティッキーが解除されます。
2カラムで、左にコンテンツ、右にバナー画像を3つ入れました。カラムの下にスペーサーを設置しています。左カラムの内容が終了すると、スティッキーが解除されます。
![](https://cxg-design.jp/wp-content/uploads/2024/03/04d0de9036a1baab54052cce239fae76.png)
2カラムの右にバナーを配置
![](https://cxg-design.jp/wp-content/uploads/2024/03/7d19e08895e645e945285fe5eccd860d.png)
カラムの下にスペーサーを設置
Fixed Widget
左サイドバーの外観>Fixed Widgetをクリックし、設定画面を表示します。まず、一般設定>Improved versionにチェックします。今回は、スティッキーバナーをブラウザー上から30px開けた場所で固定したいので、Stop Elements>上マージンの設定を30pxにします。
「Custom Fixed Elements」にスティッキーバナーに設定しする任意のクラス名を入力します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/d64714a7fa9f6bcb5a76027b9a5dd8a7.png)
一般設定>Improved versionにチェック。スティッキーバナーのマージン、クラス名を設定。
項目 | 設定値 |
---|---|
Improved version | チェック有 |
上マージン | 30px |
Custom Fixed Elements | スティッキーバナーのクラス名 |
クラス設定
編集画面を開き、スティッキーバナーに設定するピンクバナーをクリックします。右サイドバー、ブロック>設定>高度な設定>ADDITIONAL CSS CLAASS(ES)に、「Custom Fixed Elements」で設定したクラス名を入力します。これで、スティッキーバナーの作成は終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/03/9761d50be11543c2a6c94b840d1aed7a.png)
ピンクバナーに「Custom Fixed Elements」で設定したクラス名を入力
以上で今回の説明は終了です。外部リンクバナーや、他ページへのリンクなど用途に合わせて使用できますね。カラムに入れるのであれば、スティッキー解除要素を指定しなくて良いので、簡単に設定できま。