Hatena::ブログ(Diary)

honeniqの三日坊主日記 このページをアンテナに追加 RSSフィード Twitter

2011-12-04

サイドバーにブログパーツを綺麗に置く方法

はじめに

サイドバーに外部のブログパーツを設置したくて色々試した結果、なんとなくサイドバーのことが分かってきたので、今回学んだことを紹介します。

デザイン編集の「詳細」の「ページのフッタ」っていう項目ですが、かんたんデザインでポチポチ選んで設定したまんまだと

</div>
<div class="sidebar">
	<hatena name="profile" template="hatena-module">
	<hatena name="searchform" template="hatena-module">
	<hatena name="section" template="hatena-module">
	<hatena name="sectioncategory" template="hatena-module">
	<hatena name="keywordcloud" template="hatena-module">
</div>

こんな感じになっていると思います。

ここにコードを追加して自分の好きなブログパーツを設置するときはどうするのっていうのが今回の話題です。


基本的なこと

サイドバーに何かを表示したい場合、

<div class="sidebar">

から最後の

</div>

の間にコードを書いていくことになります。


公式のはてなモジュールに関しては、

<hatena name="profile">

みたいに書いておくと、はてな側で対応したブログパーツを展開してくれます。最初に載せたコードの場合は、プロフィール・ブログの検索・最新タイトル・カテゴリー・最新言及キーワードの順で展開されます。


外部のブログパーツに関しては展開はしてくれませんので、それぞれのサービスで提供されているコードを貼り付けることになると思います。


見た目を統一したい

f:id:honeniq:20111204225525p:image:medium:right

ただ、そのままコードを書いても、そのままポンと置かれるだけです。他の項目のようにタイトル的なものもありませんし、テーマによっては枠線もつかなくて大分浮いてしまうことになります。もうちょっと周りに雰囲気を合わせたいところです。

そこで、追加したいブログパーツを下記のコードで囲います。

	<div class="hatena-moduletitle">ブログパーツのタイトル</div>
		<div class="hatena-modulebody">
			ブログパーツのコード本体
		</div>
	</div>

はてなモジュールにも、barcodeモジュールのようにポン置きになってしまうタイプのものがありますが、同じように囲ってやればOKです。


そんなこんなで、当サイトのサイドバーは現状こんな感じです。

</div>
<div class="sidebar">
	<hatena name="profile" template="hatena-module">
	<hatena name="searchform" template="hatena-module">
	<hatena name="section" template="hatena-module">
	<hatena name="adsense" format="180x150">
	<hatena name="sectioncategory" template="hatena-module">
	<hatena name="keywordcloud" template="hatena-module">
	
	<div class="hatena-module">
		<div class="hatena-moduletitle">QRコード</div>
		<div class="hatena-modulebody" align="center">
			<hatena name="barcode" value="http://d.hatena.ne.jp/honeniq/" template="hatena-module">
		</div>
	</div>

	<div class="hatena-module">
		<div class="hatena-moduletitle">ランキング</div>
		<div class="hatena-modulebody" align="center">
			<a href="http://mobile.blogmura.com/iphone/"><img src="http://mobile.blogmura.com/iphone/img/iphone100_33_3.gif" width="100" height="33" border="0" alt="にほんブログ村 携帯ブログ iPhoneへ" /></a>
		</div>
	</div>
</div>

f:id:honeniq:20111204225526p:image:medium:right

はてなモジュールをいくつか並べて、その下に今回紹介した方法でQRコードにほんブログ村のバナーを置いています。他のパーツと同様に、タイトルがついてますね。

意外と簡単なので、是非お試しください!

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


画像認証

トラックバック - http://d.hatena.ne.jp/honeniq/20111204/1323008943
Connection: close