Hatena::Groupugochara

Harimauの編集記録等

2011-10-19

トップページとヘッダーのデザインを修正

| 17:43

トップページ周りでカレンダーが追加されたりしていたのでそれに関するデザインの調整を行います。

また、前ページに追加されたメニューに関してもCSSによるレイアウトに切り替えます。意見がある場合は掲示板までお願いします。


カレンダーのデザインを修正

スタイルシート
.top-calendar-container
{
	background-image:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/blog-main.png);
	padding-bottom:10px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
.top-calendar-container a
{
	color:#bc350b !important;
}

説明

カレンダーがトップページに追加されましたが、背景がむき出しになってしまうため背景画像を設定しました。おまけで角を丸くしてみました()

CSS3非対応ブラウザベンダーハックが必要なブラウザでは角丸の指定は無視されます。

上部の「新着キーワードの一覧」

スタイルシート
#hatena-group-top .recentitem_diary
{
	background-image:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/blog-main-top.png);
	padding-top:10px;
	border-top-right-radius: 5px;
}

説明

新着キーワードの一覧」が上に見切れる問題を修正。

おまけで上部を丸める画像を配置しました

ヘッダーに関する内容

HTML
<table class="header-menu" cellspacing="0" border="1">
 <tr>
  <th> メニュー </th>
  <td>
   <a href="/diarylist">日記一覧</a> |
   <a href="/calendar">カレンダー</a> |
   <a href="/keyword">キーワード一覧</a> |
   <a href="/bbs">掲示板</a> |
   <a href="/task/">あしか</a> |
   <a href="/topictree">トピックツリー</a>
  </td>
 </tr>
</table>

<table cellspacing="0" border="1" class="header-menu">
 <tr>
  <th> お知らせ </th>
  <td>
   はじめての方は<a href="http://ugochara.g.hatena.ne.jp/keyword/%E3%81%86%E3%81%94%E3%82%AD%E3%83%A3%E3%83%A9%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%A3%E3%81%A6%E4%BD%95%3F">始めてガイド</a>をお読みください。
   <br>
   <a href="http://q.hatena.ne.jp/1318650948">アンケートにご協力ください!</a>
   </td>
 </tr>
</table>
スタイルシート
table.header-menu
{
 width:100%;
 margin-bottom:10px;
}
table.header-menu th
{
 width:100px;
 background-color:#d9712b;
 text-align:center;
 padding:10px;
}
table.header-menu td
{
 background-color:f0c882;
 text-align:center;
 padding:10px;
}

説明

タグのbgcolor属性やwidth属性、centerタグなどはできれば利用しないほうがいいと考えたため、CSSによるレイアウトにしました。

HTMLがすっきりするとともに調整もCSSでできるため、たぶん便利です。

若干上下のパディングなども変更になっています。

HTMLの編集前も保持しているので差し戻すことも可能です。意見があれば掲示板までお願いします。

ijhhhjjijhhhjj2011/10/20 04:18カレンダーが見やすくなりました!!有り難う御座います!!

SukaiSukai2011/10/30 23:39いつもデザインの調整ありがとうございます!
harimau_tigrisさんがいればとても安心です。