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

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

Load More Sidebar Content When There Is Room
[ad#ad-2]
デモではjQueryとPHPを使用して、コンテンツの高さを取得し、それに合わせて動的にサイドバーにコンテンツを生成しています。

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