X-T9 でサイドバーにフローティングバナーを設置するカスタマイズ手順

という疑問をひとつずつ解消しながら、X-T9 の実案件デビューに向けて準備しています。

今回は Lightning のサイドバーにある 上端固定優先 に相当する機能をこの X-T9 サイトで実装してみました。

Lightning の上端固定優先 という設定を使うと、フローティングバナーっぽい動きをかんたんにサイドバーに設定できるのですが、X-T9 のサイドバーにはそのような機能がありません。

Lightning のサイドバーとまったく同じ動きを実装するのは難易度が高そうなので、サイドバーの先頭に置いたバナー画像をフローティング表示させるカスタマイズを行いました。

いまご覧になっているこのページをスクロールして、画面右側に表示されているバナー画像の動きをご確認ください。

実質的にはこの実装で用が足りますし、むしろこの動きの方がバナーが目立ちやすいと思います。

ということで、実装手順を紹介します。

手順① バナー画像

サイドバーの先頭にバナー画像を置いて、バナー画像の 追加 CSS クラス に sidebar-banner と指定します。

手順② CSS

以下の CSS を追加します。

@media (min-width: 782px) {
  .sidebar-banner {
    position: sticky;
    top: 150px;
  }
}

150px の部分をお好みでどうぞ。
(min-width: 782px) を指定して、1カラムレイアウトに切り替わるスマホ表示でバナー画像が固定されないようにしています。

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

投稿者アーカイブ

• ExUnit2026年8月4日ExUnit の HTML サイトマップを見やすくカスタマイズするやり方
• WordPress2026年6月19日WordPress 7.0 のグリッドブロックのうれしいレイアウト仕様
• X-T92026年6月15日X-T9 でサイドバーにフローティングバナーを設置するカスタマイズ手順
• X-T92026年6月10日X-T9 のサイトにパンくずリストを表示しました