はてなサイドバーのブログパーツをセンタリングする
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>