Create  Edit  Diff  FrontPage  Index  Search  Changes  RSS  Login

タイトルリストやカレンダー2を日記の右(あるいは左)に表示したい

  このようなレイアウトを、tDiary界隈では「サイドバー」と呼んでいます。tDiaryはヘッダとフッタに少しだけタグを入れることでサイドバーレイアウトにでき、タイトルリストなどを挿入する事ができます。以下の例はタイトルリストの場合です。カレンダー2や他の物にも応用できるでしょう。

サイドバー対応テーマの場合

サイドバーを実現するための標準的な設定を組み込み済みのテーマがいくつかあります。そのテーマがサイドバーに対応しているかどうかは、テーマファイル中にdiv.sidebarの記述があるかどうかで見分けられます(やってみればわかるというのもある)。

これらのテーマを使っている場合には、以下のようにします。

【ヘッダ】
<div class="main">
【フッタ】
</div>
<div class="sidebar">
<%=title_list%>
</div>

サイドバー未対応テーマの場合(position: absolute版)

左にサイドバーを出す書き方

【ヘッダ】
<div style="margin-left:20%;">
【フッタ】
</div>
<div style="position:absolute; top:0px; left:0px; width:20%;">
<%=title_list%>
</div>

ちなみにtopの数値を100pxとかにするとその分下に下がります。

右にサイドバーを出す書き方

【ヘッダ】
<div style="margin-right:20%;">
【フッタ】
</div>
<div style="position:absolute; top:0px; right:0px; width:20%;">
<%=title_list%>
</div>

【注意点】 calendarやadminmenuの位置がサイドバーに被る場合がある。その場合は「top」の値を下方に修正するなどする。

サイドバー未対応テーマの場合(float版)

左にサイドバーを出す書き方

【ヘッダ】
<div style="width: 80%; float: right;">
【フッタ】
</div>
<div style="width: 20%; float: left;">
<%=title_list%>
</div>

右にサイドバーを出す書き方

【ヘッダ】
<div style="width: 80%; float: left;">
【フッタ】
</div>
<div style="width: 20%; float: right;">
<%=title_list%>
</div>

【注意点】テーマの種類によっては、<div style="width:80%;">にした場合に横にサイドバーが出ず下に出てしまうことがある。そういう場合は80%を減らす。

nga

2002-09-04 typo修正

Last modified:2006/05/09 23:27:44
Keyword(s):
References:[FAQ]