当サイトのサイドバーの最下部要素はスクロールに合わせて追従するようになっています。
本ページではWordPressテーマ「Twenty Sixteen」使用時のやりかたを解説します。
- 要コーディング知識（難易度は低）
- プラグイン無しです
- スタイルシートのみいじります
- Twenty Sixteenのバージョンは2.7でやりました
要素のIDを特定する
追従させたい要素のIDを特定する
ChromeならF12押せばデベロッパーツールが出ます。あとは「セレクトモード」にして追従させたい要素をクリックしたらHTML側のコードと睨めっこしてれば特定できるでしょう。
私と同じTwenty SixteenならIDは「block-数字」です。
コンテンツエリアのIDを特定する
追従させたい要素のIDを特定した要領で、今度はコンテンツエリアのIDを特定してください。ヘッダーとフッターの間の、サイドメニューを含むメインエリアです。
私と同じTwenty SixteenならIDは「content」です。
「14.3 – >= 910px」内「.sidebar」の「margin-left」を「auto」にする
外観→テーマファイルエディター→style.css内の、下記14.3 – >= 910pxの「.sidebar」内、「margin-left:」を「75%;」から「auto;」に書き換えてください。
私と同じ状態なら3201行目にあるはずです。
.sidebar {
float: left;
margin-left: auto; /** margin-left: 75%; **/
padding: 0;
width: 25%;
}※ /** margin-left: 75%; **/ はただのメモです。
これをしないと次の最後の操作でレイアウトが大きく崩れます。その状態が見たい人はあえて次の操作を先にやってからこっちをしてください。
追加CSSにsticky用コードを貼り付ける
外観→カスタマイズ→追加CSSと操作して下記コードを貼り付けてください。
#コンテンツエリアのIDと追従させたい要素のIDの部分は最初に特定した要素のIDに書き換えてください。
@media screen and (min-width: 56.875em) {#コンテンツエリアのID {
display: flex;
}}
#追従させたい要素のID{
postion: -webkit-sticky;
position: sticky;
top: 10px;
}Twenty Sixteenはサイドバーの高さがサイドバーのコンテンツ分しかないので、記事とサイドバーを囲む親要素ID「content」に「display: flex;」を当てて記事エリアと同じ高さにしています。その前にある「@media screen and (min-width: 56.875em)」は、以下のコードはウィンドウ幅がこれ以上の時のみ適用、という意味です。
あとは要素を追従させる「position: sticky;」と、ウィンドウの上端からの間隔「top: 10px;」です。ちなみに「postion: -webkit-sticky;」はブラウザsafari用です。
おわりに
ここまでやればサイドメニューの一番下の要素がスクロールに合わせて追従されます。サイドメニュー内の要素ではなく、サイドメニューそのもののIDを指定すればメニューごと追従させることも可能です。
サイドメニューの追従方法を解説しているサイトはたくさんありますが、私の場合、レイアウト崩れがどうしても直せず、「.sidebar」の「margin-left: auto;」で解決できることは自力で特定しました。
これを解説しているサイトがなかったので本サイトでも解説ページをつくることにしました。