Webdiary 導入記録-3

エントリー

2008/04/06 09:07

Webdiaryのヘッダー部にお天気情報を実装した際の方法を紹介します。tableタグを使って、ヘッダー部の左端にblogのタイトル、右端にはお天気情報を表示させています。common.cssも修正して罫線の色会わせと、右寄せを行っています。私としては不満足ですが、今はコノ方法しか思い付きませんでした。まだ他の良い方法が無いか考慮中です。①header.html、②common.cssを変更します。

---変更前

---
<body>
<div id="container">
<div id="header">
<h1><a href="${INFO_PATH}">${INFO_TITLE}</a></h1>
<p>${INFO_DESCRIPTION}</p>
</div>

---変更後

---
①header.htmlの変更
<div id="container">
<div id="header">
<table width="100%">
<tr>
<td width="320pixels"><h1><a href="${INFO_PATH}">${INFO_TITLE}</a></h1><p>${INFO_DESCRIPTION}</p></td>
<td>
(ここにお天気情報を入れる)
</td>
</tr>
</table>
</div>
②common.css の変更
table {
margin-bottom: 10px;
border: 1px solid #C0C0E3;
border-collapse: collapse;
}
table tr th {
padding: 1px;
border: 1px solid #C0C0E3;
background-color: #EEEEEE;
text-align: center;
}
table tr td {
padding: 1px;
border: 1px solid #C0C0E3;
text-align: right;
}