WordPress OnePressテーマサイドバーの固定方法

Last Updated: 2024 年 10 月 25 日 댓글

このブログでは、さまざまな WordPress テーマのサイドバー固定方法について取り上げています。 OnePressテーマ同様の方法でサイドバーを固定できます。この記事では、OnePressテーマのサイドバーを固定する方法について説明します。

WordPress OnePressテーマサイドバーの固定方法

シンプルなCSSを使用して WordPressまたはティーストーリーブログのサイドバーを固定できます。

基本的には 位置:粘着性 プロパティを使用してサイドバーを作り付けで固定できます。

/* CSS for making the sidebar sticky */
#secondary {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
}

しかし、テストしてみると、OnePressテーマでは sticky プロパティを使用した上記のコードは動作しません。 sticky属性が機能しない理由について Stackoverflow フォーラムの投稿を参考にしてみてください。

OnePressテーマを使用している場合は、このブログで紹介したことがあります GeneratePress テーマのサイドバーの固定に使用されるCSSコードを適用できます。次のCSSコードを使用すると、うまく動作することがわかりました。

/* OnePress 테마에서 사이드바를 고정(sticky)하는 방법 */

/* Fix the top of the sidebar in OnePress theme and scroll the sidebar to the bottom when content is scrolled down */

@media (min-width: 1025px) {
    #content-inside {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }

    #primary {
        flex: 1;
    }

    #secondary {
        position: -webkit-sticky; /* 사파리용 */
        position: sticky;
        top: 75px; /* 필요에 따라 이 값을 조정하세요 */
        align-self: flex-start; /* 사이드바가 상단에 고정되도록 설정 */
    }

    .admin-bar #secondary { 
        top: 105px; /* 관리자 바 높이에 따라 이 값을 조정하세요 */
    }
}

上記のコードを適用すると、本文を下にスクロールするとサイドバーがサイドバー領域で上部が固定され、本文コンテンツを一番下にスクロールするとサイドバーも下にスクロールして下端が固定されます。

WordPress OnePressテーマサイドバーの固定方法

ログイン状態とログアウト状態でテストしてtop値を適切に修正してください。ヘッダーの高さなどによっては、数値を適切に調整する必要がある場合があります。

上記のコードは、 外観 » カスタム » 追加 CSS(旧バージョンの WordPressは ルックス » カスタマイズ » 追加 CSS)に入力するか、OnePressテーマの チャイルドテーマ フォルダ内のスタイルシートファイル(style.css)に追加してください。

本文を下にスクロールするときにサイドバーも下にスクロールし、サイドバーコンテンツの下部がサイドバー領域の下部に固定されるようにしたい場合は、 #secondary 部分を変更すればよい。

#secondary  {
    position: -webkit-sticky;
    position: sticky;
    bottom: 2rem; /* 사이드바 하단과 사이트 하단과의 간격을 지정. 적절히 수정하세요 */
    align-self: flex-end;
}

簡単な方法:プラグインの使用

上記のCSSコードを使用すると、別のプラグインやJavaScriptを使用せずにサイドバーを効果的に固定できます。このブログは現在 GeneratePress テーマを使用していますが、CSSを使用してサイドバーを固定しました。

上記の方法がわからない場合は、プラグインを使用できます。

メニューとヘッダーを固定する方法について説明していますが、サイドバーを含むすべての要素を固定できます。

単純なプラグインなので、サイトの速度にわずかな影響しか与えないようですが、この機能のためにプラグインを使用することはお勧めできません。しかし、より洗練されたサイドバーや特定の要素を固定したい場合は、まともな選択肢かもしれません。

参照


コメントを残す

コメント