サイドバー追従に憧れて「position: sticky」してみたのですが単純にはいきませんでした。

コンテンツ(2カラム)部分をカスタマイズして何とか追従させることができたので備忘録として書き留めておきます。

※テーマをカスタマイズする際は必ずバックアップを取ってから!

CSSカスタマイズでサイドバーを追従させる

.wrapper {} 内に「display: flex;」を追加

#content {} 内の「width: 68%」を「width: 70%」に変更

#content {} 内に「margin-right: 30px;」を付与

#content {} 内の「float: left;」を削除

#sidebar {} 内の「float: right;」を削除

.sidebar {} 内の「overflow: hidden;」を削除

@media only screen and (max-width: 992px) {} 内に「.wrapper {display: block; }」を追加

]]></b:skin>の直前に
「#sidebar-section { height: 100%; }
#HTML○ /* 追従したい要素 */ {
position: -webkit-sticky;
position: sticky;
top: 10px; /*上から離す距離*/
}」
を追加

解説

「position: sticky」を使うには投稿部分とサイドバー部分の高さを同じにしなければならない。
元のテーマは投稿部分とサイドバー部分を左右に振り分けているだけなので高さが等しくない。

CSSのflexboxを使うと、複数の要素を高さ・幅を均等に横並びにしてくれる。
最近の2カラムレイアウトはflexboxがよく使われてる(らしい)。

ただ、そのままflexbox化してしまうとスマホやタブレットから見た時のレイアウトが崩れてしまう。
そのため、一定の幅より小さくなったら2カラムを1列に戻す設定が必要。

その辺りを考慮しつつ、flexbox化してもレイアウトが崩れないようにCSSを書き換えた。

さらに、「position: sticky」は親要素が「overflow: hidden;」などでfloat解除されている状態では無効になってしまう。
そのため、親要素の「overflow: hidden;」を削除した。

最後に「position: sticky」の設定をしておしまい。

【Blogger】CSSだけでサイドバーを追従させるカスタマイズ【Viral Pro】

サイドバー追従に憧れて「position: sticky」してみたのですが単純にはいきませんでした。

コンテンツ(2カラム)部分をカスタマイズして何とか追従させることができたので備忘録として書き留めておきます。

※テーマをカスタマイズする際は必ずバックアップを取ってから!

CSSカスタマイズでサイドバーを追従させる

.wrapper {} 内に「display: flex;」を追加

#content {} 内の「width: 68%」を「width: 70%」に変更

#content {} 内に「margin-right: 30px;」を付与

#content {} 内の「float: left;」を削除

#sidebar {} 内の「float: right;」を削除

.sidebar {} 内の「overflow: hidden;」を削除

@media only screen and (max-width: 992px) {} 内に「.wrapper {display: block; }」を追加

]]></b:skin>の直前に
「#sidebar-section { height: 100%; }
#HTML○ /* 追従したい要素 */ {
position: -webkit-sticky;
position: sticky;
top: 10px; /*上から離す距離*/
}」
を追加

解説

「position: sticky」を使うには投稿部分とサイドバー部分の高さを同じにしなければならない。
元のテーマは投稿部分とサイドバー部分を左右に振り分けているだけなので高さが等しくない。

CSSのflexboxを使うと、複数の要素を高さ・幅を均等に横並びにしてくれる。
最近の2カラムレイアウトはflexboxがよく使われてる(らしい)。

ただ、そのままflexbox化してしまうとスマホやタブレットから見た時のレイアウトが崩れてしまう。
そのため、一定の幅より小さくなったら2カラムを1列に戻す設定が必要。

その辺りを考慮しつつ、flexbox化してもレイアウトが崩れないようにCSSを書き換えた。

さらに、「position: sticky」は親要素が「overflow: hidden;」などでfloat解除されている状態では無効になってしまう。
そのため、親要素の「overflow: hidden;」を削除した。

最後に「position: sticky」の設定をしておしまい。

次に読まれている記事