こんにちは、ふみです。みなさんはスクロールしすぎると中身全てが見えなってしまう残念なサイドバーがあるサイトを見かけたことはありますか？
当サイトは WordPress（ワードプレス）で記事を書いて、テーマは無料で利用できる Cocoon（コクーン）を使用しています。
そして、最近まで当サイトは記事本文をスクロールすると、サイドバーの中身が全て見えなくなるまで記事と一緒にスクロールされてしまう残念な状態でした。
記事を読み終わった後にサイドバーに何も表示されていないのはスペースが無駄になるので、サイドバーが一番下まで表示されたらサイドバーのスクロールが止まるように修正しました。
現在はサイドバーの下の余白が表示されないように修正された状態になっています。
今回は Cocoon のサイドバーの下の余白が表示されないように修正する方法を紹介します。
CONTENTS
スクロール後にサイドバーの下の余白を表示させない手順
１．
WordPress にログインする。
２．
次の手順で追加CSS を開く。
外観 > カスタマイズ > 追加 CSS
３．
追加CSS に次のコードをコピー＆ペーストで貼り付けた後、公開の文字を押す。
#sidebar{ position: sticky; bottom: 0; align-self: flex-end;}
以上の手順で Cocoon のサイドバーの下の余白修正は完了です。
サイトを表示して記事をスクロールした時に、サイドバーが一番下まで表示したところで止まるのを確認してみてください。
解説
ここからは今回追加した CSS (CascadingStyleSheet) の記述の解説です。
CSS は Web ページをデザインする言語で、WordPress では「追加CSS」からテーマのデザインを変更する CSS を記述することができます。
id名を調べる
CSS の記述で中括弧（波括弧）の前に記載されている「#sidebar」の部分はセレクタです。
今回使用している「#sidebar」は#がついているので id セレクタです。
CSS のセレクタとして記述する名称はブラウザの開発者ツールから確認できます。
Windows版の Google Chrome の場合は「Ctrl + Shift + i」で開発者ツールに移行します。
その後、「Ctrl + Shift + c」を押すとセレクトモードになり、カーソルをページ内の要素（サイドバーの外枠等）に合わせると CSS のセレクタとして記述できる名称を確認できます。
Cocoon のサイドバーは「div#sidebar.sidebar.nwa.cf」でした。
サイドバー等、要素の各種名称は WordPress のテーマによって異なります。
Cocoon のサイドバーは id名の指定のみで変更できますが、使用しているテーマによっては id名の指定のみ（100点）では点数不足で変更ができない場合があります。点数が足りない時は、開発者ツールで表示された要素の名称全てを CSS のセレクタとして記述すると点数が上がって変更が反映される場合があります。
要素の位置を指定する
CSS の記述で中括弧（波括弧）の中に記載されている部分はブロックです。
ブロックはプロパティと値を宣言して要素のデザインを指定します。
プロパティと値はコロン（:）で区切り、値の最後にセミコロン（;）を記述します。
position: sticky;
position は要素がどのように配置されるかを設定するプロパティです。
sticky はスクロールの途中から位置を固定する時に使用する値です。
top, right, bottom, left のプロパティと align-self のプロパティを組み合わせてスクロール時の要素の位置を指定できます。
bottom: 0;
bottom 0; は要素の位置を一番下にする宣言ですが、今回の動作を機能させるには、さらに「align-self: flex-end;」の宣言を組み合わせる必要があります。
下の余白を増やす場合は「bottom: 1rem」等、0より大きい値を指定して反映できます。
align-self: flex-end;
align-self はサイドバー等の flexbox アイテムの配置を個別に設定するプロパティです。
flex-end は下に配置する値です。
まとめ
- WordPress のサイドバーの動作は追加CSS から変更できる
- サイドバーを指定するセレクタの記述はブラウザの開発者ツールで調べることができる
- サイドバーのスクロールは CSS の3つの宣言「position: sticky; bottom: 0; align-self: flex-end;」の組み合わせで下の位置で止めることができる
ありがとうございました。
コメント