横浜のフリーランスWeb制作者ブログ

Tweet

最近、PloneというCMSの開発にも携わらせていただいています。導入への敷居は高いものの、多彩なワークフローオプションや、柔軟な多言語対応機能、導入後は親しみやすいWYSIWGエディタが支持され、海外では人気が高く、アメリカCIAやFBIなど名だたる機関が導入しているようです。こうした特性上、日本国内でも官庁や教育機関では好まれているようです。生成されるコードも大変お綺麗でして、体感的にはSEO面でもかなり力強いですね。Googleもご推奨しているとか、何とか。

最初はちんぷんかんぷんだった私ですが、技術は体で覚えるもの、とはよく言ったもので現場でさまざまな間違いを繰り返しながら、気がつけば結構Ploneにも強くなったような気がする今日この頃です。思えばEC-CUBEを覚えたのも、似たような状況下だったなぁ…。火事場は好きではないのですが、一歩ブレイクアウトするきっかけは、どうも火事場が多い気がします。

そんなわけで、Ploneでの構築や改修案件もバシバシご相談くださいませ。

今日は、Plone特有の技術的なお話し、というわけでは無いのですが、CMSなどでどうしても、「bodyタグに背景画像を貼り付けて尚且つ画面の最下部に表示させたい」場合のtipsです。

メインコンテンツの幅をある程度決めているページの場合で、フッター部分に画像を貼り付けたいとします。その場合はメインコンテンツの一番外側にあるdivタグに対して、背景画像を指定して、「background-position: bottom」とかにしてやれば

こんな感じで背景画像が入ります。しかし、この背景画像だけはブラウザ画面の横幅いっぱいにしたい、という場合はどうでしょうか。

ひとつは、テンプレートを弄って、メインコンテンツの外側に、もう一つ横幅100%のdivを設置してやれば…という考え方。本当はこれが至極真っ当なのですが、Ploneだと少々面倒くさい、というかできればやりたくない。なるべく元のテンプレートを弄らずに、cssなんかで解決出来るものであればそうするのがベスト、というのが私の（少なくとも現段階での）Ploneに対する考え方なのです。

その他のCMSでも似たようなケースはあると思います。この場合、どうするか。もうメインコンテンツの上位にあるbodyタグに背景画像を貼り付けてやるしかありませんなぁ。

そこで、cssにてbodyタグに、背景画像を貼り付けてやります。

こんな感じで。こうすると、ChromeやFirefoxなどの「ちゃんとしてる系」ブラウザでは意図通り、ページの最下部に画面幅いっぱいの背景画像が表示されるのですが、IE8～9ではなぜか何も表示されません。IE7や6ですら表示されるのに…！

上記のbottom指定を外してやると、IE8～9でも画面の最上部に背景画像が表示されるので、完全に無視されているわけでは無さそうです。…だからIE嫌いだよ。

いろんなサイトを調べながらアレコレ弄っているうちに、やっとIE8～9でも画面最下部に幅いっぱいの背景画像が表示されるようになりました。その方法とは…

display: inline-block;　…コレを加えることで、何故か解決しました。全く理に適ってないのでキモチワルさ全開なのですが。

というわけで、何故かIEでbodyタグに対してcssで背景画像を高さ指定付きで指定した場合表示されない！というトラブルにお悩みの場合は「display: inline-block;」もセットで指定してみてはいかがでしょうか、というお話しでした。

今年は夏以降もいろいろと忙しくさせていただいております。昨年とはえらい違いです。ありがとうございます。ありがとうございます。引き続き、SiGT Web Studioを宜しくお願い申し上げます。

Additional comments powered byBackType