ホームページやブログを作っていると、サイドバーにバナーを設置して、スクロールに合わせて固定したいという場面があるかと思います。

動画の右側のバナーのようなものです。

以前までは色々とコードを書いたりプラグインに頼る必要がありました。

しかし、WordPressテーマ「unitone」であれば、標準機能のみで実装することができます。

今回はその方法についてまとめます。

ブロック構成

まずはunitoneのブロック構成から。

このようなブロック構成になります。

今回のポイントとなるのは、デコレーターブロックです。

デコレーター（sticky）の設定

作業は超簡単で、下層のデコレーターブロックに、sticky設定を行うだけです。

位置設定のpositionから、stickyを選択。

上（Top）に任意の数値を入力して完了です。（今回は32pxにしました）

実際にスクロールに合わせて、サイドバーの任意の部分が固定されているかと思います。

まとめ

以上、今回はunitoneの標準機能だけで、サイドバーに要素を固定する方法を解説しました。

ちょっとしたCSSの知識さえあれば簡単に実装できます。

これがブロックエディターだけで完結するというのが感動ものです。ぜひ試してみてください。