ウェブページのサイドバーに生じる空きスペースの活用方法

ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。
理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。

サイトのキャプチャ

[ad#ad-2]

この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。

サイトのキャプチャ

Load More Sidebar Content When There Is Room

[ad#ad-2]

デモではjQueryとPHPを使用して、コンテンツの高さを取得し、それに合わせて動的にサイドバーにコンテンツを生成しています。

デモのキャプチャ

デモページ

元記事では、PHPを含むファイル一式がダウンロードできます。

こういった方法でサイドバーにコンテンツを配置することができるようになると、それを考慮した面白いことができるようになるかもしれません。
また、動的に配置を行っているため、Googleなどの検索ロボットはこのコンテンツを取得することはできないでしょう。そのため、ページに直接的には重要ではないコンテンツを配置した方がよいと思います。

sponsors

top of page

©2018 coliss