logる このページをアンテナに追加 RSSフィード

2010-08-29

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

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>

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/qaz76/20100829/1283077807