はてなサイドバーのブログパーツをセンタリングする

GoogleGadgetでブログパーツ箱を作ってみた
jognoteのブログパーツをはてなで使う

でGoogleGadgetを使えるようになったのだけど、単純にscriptタグを張り付けたたけだと、見た目がイマイチ。


日記のサイドバーなどにブログパーツを設置する

によると、hatena-widgetを指定したdivで囲むことによって、はてなモジュールと同じ見た目になりそう...
でも、それだけだとガジェットがbox内で左寄せになってバランスが悪いのだ;

divタグにcenter属性を追加するのが手っ取り早いのだけど、どうせだらスタイルシートでセンタリングします。

その方法...

ブログパーツスタイルシートでセンタリングする方法

管理→デザイン→詳細タブで...

ページのフッタ

2重のdivタグで囲みます

<div class="hatena-module gadget">
	<div class="gadgetbody">
		...ブログパーツ(scriptタグ)をここに...
	</div>
</div>
スタイルシート

↓この2つを追加します

div.gadget {text-align:center; width:100%;}
div.gadgetbody {width:200px; margin-left: auto; margin-right:auto;}

これでリキッドなhatena-moduleのボックス内でガジェットがセンタリングされます。

ちなみに

ガジェットのサイズを全部固定するなら(この例だと200px)いいけど、バラバラならdivタグで直接指定したほうがいいですね。

<div class="hatena-module" style="text-align:center; width:100%;">
	<div style="width:200px; margin-left: auto; margin-right:auto;">
		...ブログパーツ(scriptタグ)をここに...
	</div>
</div>