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