Personal tools
You are here: Home なごぶろ COREBlogを読む(blog_banner)
Document Actions

COREBlogを読む(blog_banner)

index_htmlの次は何を読もうかなと考えて、まぁ上に並んでいるものから見て行こうかということで、次はblog_bannerです。

コメントとcssを適用するためのdivがありますが、基本的にはテーブルなので、このテーブルを見てみることにします。まずはセルの構造をつかむために簡略化して表示してみましょう(テーブルにボーダーをつけ、スタイルなどは排除)。

ソース。

<table border="1">
<tr>
<td>cell1</td>
</tr>
<tr>
<td rowspan="2">cell2</td>
<td>cell3</td>
<td rowspan="2">cell4</td>
</tr>
<tr>
<td>cell5</td>
</tr>
</table>


これをレンダリングすると以下のようになります。












cell1
cell2 cell3 cell4
cell5


実際のバナー部分

cell1の内容は以下のようになっています。

<tr height="10" style="font-size:7px;">
<td>&nbsp;</td>
</tr>

バナーの上のスペースを作っているのでしょうか。うーん、意味あるのかな…



cell2の内容は以下のようになっています。

<tr height="30">
<td rowspan="2"
style="background:#<dtml-var color1 missing="FFF">;
border-right :1px solid #000;
width: 3.6em;">
&nbsp;<br>
</td>

中身は空。四角形を作ってるだけですな。



cell3の内容は以下のようになっています。

<td
style="background:#<dtml-var color2 missing="C0C0C0">;
border-bottom :1px solid #000;"
align="left">

<a href="<dtml-var blogurl missing="">/" accesskey="1">
<dtml-if blog_logo_img>
<dtml-var blog_logo_img><br>
<dtml-else>
<span class="blogname">
&nbsp;<dtml-var blog_title>
</span>
</dtml-if>
</a>

</td>


このセルをクリックするとトップに飛ぶわけですな。

注目したいのはdtml-ifによって条件分岐をさせている部分。blog_logo_imgというオブジェクトが存在すれば、これを表示し、存在しなければ、blognameを表示するというわけです。

contents内にblog_logo_imgがない場合




contents内にblog_logo_imgがある場合




cell4の内容は以下のようになっています。

<td rowspan="2" width="270">
 <br>
</td>

width="270"が設定されているのがミソでしょうか。blognameが長すぎて改行されてしまうときには、この値を小さくすれば改行されなくなるかもしれませぬ。



cell5の内容は以下のようになっています。

<tr height="10">
<td style="background:#FFF;" align="left">
<dtml-if blog_description_img>
<dtml-var blog_description_img&gt<br>
<dtml-else>
<div class="description">
   <dtml-var blog_description missing="">
</div>
</dtml-if>
</td>
</tr>


ここでもcell3と同様、dtml-ifを用いた条件分岐を行っているようです。blog_description_imgが存在すれば、これを表示し、存在しなければblog_description(settingsにあるshort descriptionで設定)を表示するわけですな。

contents内にblog_description_imgがない場合




contents内にblog_description_imgがある場合




こうやって見てみると、ソース上には存在してるけどデフォルトではcontents内に存在しない画像があるんですなぁ。こういうのを知ってると楽しいバナーになるかもしれませんね。
The URL to Trackback this entry is:
http://nagosui.org/Nagosui/COREBlog2/28/tbping
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
(Required)
Enter the word