このブログでは、さまざまな 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; /* 관리자 바 높이에 따라 이 값을 조정하세요 */
}
}
上記のコードを適用すると、本文を下にスクロールするとサイドバーがサイドバー領域で上部が固定され、本文コンテンツを一番下にスクロールするとサイドバーも下にスクロールして下端が固定されます。
ログイン状態とログアウト状態でテストしてtop値を適切に修正してください。ヘッダーの高さなどによっては、数値を適切に調整する必要がある場合があります。
上記のコードは、 デザイン » カスタマイズ » 追加のCSSに入力するか、OnePressテーマの チャイルドテーマ フォルダ内のスタイルシートファイル（style.css）に追加してください。
本文を下にスクロールするときにサイドバーも下にスクロールし、サイドバーコンテンツの下部がサイドバー領域の下部に固定されるようにしたい場合は、 #secondary 部分を変更すればよい。
#secondary {
position: -webkit-sticky;
position: sticky;
bottom: 2rem; /* 사이드바 하단과 사이트 하단과의 간격을 지정. 적절히 수정하세요 */
align-self: flex-end;
}簡単な方法：プラグインの使用
上記のCSSコードを使用すると、別のプラグインやJavaScriptを使用せずにサイドバーを効果的に固定できます。このブログは現在 GeneratePress テーマを使用していますが、CSSを使用してサイドバーを固定しました。
上記の方法がわからない場合は、プラグインを使用できます。
メニューとヘッダーを固定する方法について説明していますが、サイドバーを含むすべての要素を固定できます。
単純なプラグインなので、サイトの速度にわずかな影響しか与えないようですが、この機能のためにプラグインを使用することはお勧めできません。しかし、より洗練されたサイドバーや特定の要素を固定したい場合は、まともな選択肢かもしれません。
コメントを残す