ASINのイメージを右寄せで表示するためにはスタイルシート内に
img.asin { float: right; }
- 見出しの前に改行(イメージなどがはみ出すことへの対応)
div.section { clear: left; }
- モジュールの書式
sectionモジュール
http://d.hatena.ne.jp/help#sectionmodule
<hatena name="section" listlimit="10" titlelength="10" moduletitle="最近の見出し" showcategory="false" template="hatena-module">
antennaモジュール
http://d.hatena.ne.jp/help#antenna
<hatena name="antenna" listlimit="10" titlelength="15" dateformat="%Y-%m-%d %H:%i:%S" gid="123" moduletitle="最近更新のページ" template="hatena-module">
<hatena name="asinlog" listlimit="10" moduletitle="お気に入りの本" template="hatena-module" type="image">
- サイドバーに何かを入れる
<UL>、<LI>でリスト表示にすることによって、モジュールに適したレイアウトになる。
<div class="sidebar"> <div class="hatena-module"> <div class="hatena-moduletitle">自己紹介</div> <div class="hatena-modulebody"> <ul> <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bweb%5d">web</a>]</li> <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bhatena%5d">hatena</a>]</li> <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5b%a5%c9%a5%e9%a5%de%5d">ドラマ</a>]</li> </ul> </div> </div> </div>
- サイドバーのcomment, trackbackモジュールの整形
Wall系などで勝手に改行してしまう場合の措置。
div.hatena-modulebody ul.hatena-recentcomment li a { display: inline; } div.hatena-modulebody ul.hatena-recentcomment li { display: block; padding : 0.4em 0.2em ; width : auto ; height : auto ; }
- サイドバーのモジュールを1行で表示
アンテナ等も含めて。paddingなどの設定もクリアされるのでそのへんは適当に。
div.hatena-modulebody ul li a { display : inline ; }
- Google検索バー
<!-- SiteSearch Google --> <center> <form method=GET action="http://www.google.co.jp/search"> <table bgcolor="#FFFFFF"><tr valign=top><td> <a href="http://www.google.co.jp/"> <img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></A> </td> <td> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=hl value="ja"> <input type=hidden name=ie value=EUC-JP> <input type=submit name=btnG value="Google 検索"> <font size=-1> <input type=hidden name=domains value="d.hatena.ne.jp"><br><input type=radio name=sitesearch value=""> WWW を検索 <input type=radio name=sitesearch value="d.hatena.ne.jp" checked> d.hatena.ne.jp を検索 <br> </font> </td></tr></table> </form> </center> <!-- SiteSearch Google -->
- はてなダイアリー検索
<CENTER><form method="GET" action="http://d.hatena.ne.jp/search" style="margin: 0;">はてなダイアリー検索 <font color="#5279E7" size="2"> <input type="text" name="word" value="" size="18" style="font-size: 8pt"> <input type="submit" name=".submit" value="検索"></font></form></CENTER>
- デフォルト
ページのフッタ
</div> <div class="sidebar"> <hatena name="searchform" template="hatena-module"> <hatena name="calendar2" template="hatena-module"> <hatena name="photo" template="hatena-module"> <hatena name="section" template="hatena-module"> </div>
- cssファイルを見る
cssファイルのアドレス。xxxはテーマ名を小文字で。
http://d.hatena.ne.jp/theme/xxx/xxx.css
WALL系のように他ファイルをインクルードしている場合もある。
http://d.hatena.ne.jp/theme/wall1/base.css