WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

CSSのみで、最下部のウィジェットを追従表示(ページの最後まで固定表示)させる方法

公開日:2021(令和3)年6月20日/最終更新日:

,
WordPressのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressに限らず、ブログコンテンツでは、自由な長さで文章を書けるため、本文とサイドバーの高さ(長さ)が一致することは稀だと思います。

仕方ないこととはいえ、サイドバーよりも本文が少なければ本文の下に大きな空白が、サイドバーよりも本文が多ければサイドバーの下に大きな空白ができてしまうのはちょっと格好悪いですね。

また、本当に短文の日記を書いているサイト以外では、後者のケースが多いのではないかと思います。

今回は、WordPressで作成したサイトで、サイドバー部分が空白になってしまわないように、一番下に挿入したサイドバーウィジェットを本文が終わるまでずっと表示する(これを追従といいます)、恐らく一番簡単な方法を紹介します。

動きを持たせるためのスクリプトや特別なプラグインを使わず、CSS(デザインコード)のみで実現できますので、処理を最小限にすることができますから、ページの表示速度にも影響がありませんから、表示速度を気にしながら対策したい方にはもってこいの方法です。

サンプル:Knowledge Base (English edition)

本記事を参考に追従ウィジェットを実装する条件

本記事で紹介するデザインコード(CSS)については、以下のレイアウトに基づいています。指定が異なると動作しませんので、お使いのテーマに合わせて変更や調整をする必要があります。

CSSのみで、最下部のウィジェットを追従表示(ページの最後まで固定表示)させる方法|Knowledge Base

上記レイアウトを文字で表現すると以下のようになります。

  • ページ全体はbodyの中に上から「header」「container」「footer」が並んでいる
  • 「container」の中に「contents」と「sidebar」が横並びになっている
  • 「sidebar」の中に、「sidebar-inner」というウィジェットが配置される場所がある
  • ウィジェットには共通の「sidebar-wrapper」が付与されている

最下部のウィジェットを固定表示させるデザインコード

以下のデザインコード(CSS)の内容を上の部分と照らし合わせ、使用しているテーマに合わせて変更してください。

/***** 一番下のウィジェットを追従表示 *****/
@media (min-width: 768px) {
/* 本文とサイドバーを含んだ場所を横並びに表示 */
.container {
  display: flex;
	}

/* サイドバー内部(ウィジェットが並ぶ場所) */
.sidebar-inner {
  height: 100%;
	}

/* サイドバー内部のうち、一番最後のウィジェットを固定表示 */
.sidebar-inner .sidebar-wrapper:last-child {
	position: -webkit-sticky;
	position: sticky;
	top: 40px; /*Adjust position */
  }
}

コードは合っているのに追従表示されないときは、キャッシュのクリア(大抵のブラウザでは「Ctrl」+「F5」)を行ってください

デザインコードの解説

意外に簡単なコードで実装できますが、実に理にかなったものとなっています。

まず1行目のメディアクエリで、サイドバー付で表示させる最低の画面幅を設定します(テーマによってさまざまです)

「本文とサイドバーを含んだ場所を横並びに表示」の部分で、本文(contents)とサイドバー(sidebar)部分をフレックスボックス(複数の箱を横並びにする)として指定します。

「サイドバー内部(ウィジェットが並ぶ場所)」でサイドバー内側の高さを100%にします(つまりフレックスボックスの中でサイドバーの内側が基準となるようにします)

「サイドバー内部のうち、一番最後のウィジェットを固定表示」で一番下に設定されているウィジェットを固定表示させます(環境に合わせて「Adjust position」とコメントしている画面上部からの高さを変更する必要があるかも知れません)。

QA AnalyticsQA Analytics

正常に表示されない(動作しない)ケースがあります

ここまで紹介した方法で、WordPressでは本当に簡単に追従ウィジェットを設定することができますが、あくまでも私の環境で実装した場合に生じた不具合を2点追記しておきます。

不具合を起こしている原因が何かを特定する一番早い方法は、ウィジェットを付け外しを行うことです。問題のあるウィジェットが判別できれば、そのウィジェットを使うかどうかを判断して、本記事で紹介する方法でウィジェットを固定表示するのか?プラグインを使って実装するのかを判断するとよいでしょう。

本サイトでは、2021年6月19日現在、本記事で紹介する方法ではなく、以下のプラグインを使って追従ウィジェットを実装しています(理由はリンクの下で述べています)。

「Q2W3 Fixed Widget for WordPress」はスクリプトを使って正確なページの高さを計算しながら追従ウィジェットを表示させるようにしている秀逸なプラグインです。

本記事で紹介しているCSSのみの場合と比べて動作は重くなる傾向にはありますが、これから紹介するような不都合が生じるものの、そのコンテンツがサイトには必要と判断した場合には、軽量化よりも正確性を重んじて、このプラグインを使用した方がよいでしょう。

高さや数が決まっていないコンテンツが後から挿入されるとき

Google Adsenseの自動広告がサイドバーに挿入される時、追従ウィジェットがページ末尾ではみ出て表示される(フッターの下まで伸びてしまう)ことがあります。

原因として考えられるのは、Adsenseのスクリプトを遅延して読み込ませていることです(asyncやdefer属性の追加ではありません)。遅延措置を行うことで、ページ表示後(ページ全体の高さが確定した後)にググっと広告が挿入されるために発生します。ウィジェットの表示がはみ出る量が後から挿入される自動広告の高さと同じことからこれが原因に違いありません。

ちなみに遅延読み込みの方法については以下の記事で紹介しています。

自動広告はどのページでいつどれだけ追加されるかがわからないため、「min-height」を使ってあらかじめ高さの予約をしておくことができませんし、Adsenseの自動広告の設定にもサイドバー部分の自動広告を制御する機能はありませんので、この方法を使いつつ、本記事の方法で追従ウィジェット機能を付加する場合には、以下のCSSを追記して、サイドバーへ自動広告を表示させないようにするほかありません。

#sidebar .google-auto-placed {
    display: none;
}

#sidebarの部分はお使いのテーマに合わせる必要があります

ただ、上記コードでは、サイドバーに出力される自動広告すべてが非表示となってしまうため、「関連記事」や「新着記事」一覧へ自動で挿入される広告も非表示になりますから、効果の有無を検証してから行う方がよいでしょう。

この不具合は、ページ表示後に挿入される高さや個数の分からないものがある場合すべてで生じますから、Adsenseの自動広告に限ったことではありません。

高さが決まっていないコンテンツがあるとき

Adsenseのレスポンシブ広告を挿入した場合や、外部のパーツを挿入した場合、Twitterのタイムラインなどを埋め込んだ時に不具合が生じることがあります。

埋め込む高さがだいたい決まっているもの(上記で言えば外部パーツや埋め込み)は、CSSで「min-height」属性を使ってあらかじめ高さを予約しておけば問題は解消できます。

問題はやはり「自動で」というコンテンツで、Google Adsenseのレスポンシブユニットはその時の状況に合わせて広告が変わる(高さが変わる)ため、ページ本文の高さに対するサイドバーの高さが判断できないことから、追従自体ができなくなる現象が発生します。

代替手段として、レスポンシブユニットではなく、幅と高さを指定した広告を挿入することで解決できますが、モバイル表示時などによい大きさの広告が表示されなくなってしまうため、工夫が必要です。