16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【CSS】はてなブログの3カラム化が難しい件

CSS超初心者です。

ですが、先日からちょっとCSSに興味が湧いていて、
仕事の合間にちょこちょこ触っており、
今週頭には、「ちょっと勉強がてらはてなブログのテーマでも作ってみようか」と思い立ち、
しばらく公式テンプレの"boilerplate"をもとに適当に弄っていました。


f:id:sakuramochi702:20130802115041j:plain


で、現状がこんな感じ。

ブログタイトルにもある通り、テーマは「似非フラット」です。


そしてここからが本題なのですが、
現状はてなブログでは3カラムのブログテーマを作成するのが非常に難しいです。
(画像では3カラムが実現できてそうに見えますが、
実際にはサイドバーは1列分の領域にwidthとfloatを調節して無理矢理2列分入れているだけです。)

というのも、現状のはてなブログ自体がサイドバーを2列表示させるような仕様になっておらず、
HTML上には"box1"と"box2"という2つのサイドバー領域があるものの、
サイドバーに設定したモジュールは全てどちらか一方(僕が試したものでは全てbox2でした)に表示されるようになっており、もう一方は必ず空なのです。

したがって、ユーザーは3カラム表示させようと思うと僕のようにfloatなどを調節して無理矢理3カラムっぽくするか、
こちらのサイトで紹介されているように、HTMLモジュールを使ってサイドバーを無理矢理2分割するかしかありません。

そして、どちらの方法もCSSの配布のみで完全に対応することができないため、
CSSの配布で行うはてなブログテーマストアへの投稿は難しいのです。

しかし、box1とbox2という領域が用意されている以上、
3カラムレイアウトが公式対応されるのは間違いないと思われます。

そうなったら今作っているテーマもCSSだけで実現できるようになって汎用的になるので、
その時にはテーマストアに投稿してみようかなぁ。

おわり。