各コンテンツのデザイン

Seesaaブログではコンテンツごとにスタイルシートが定義されています。
それぞれのコンテンツに使用されている属性を紹介します。

1. サイトヘッダーのデザイン
2. 記事のデザイン
3. カレンダーのデザイン
4. サイドバーに表示するコンテンツのデザイン

1. サイトヘッダーのデザイン

サイトヘッダーは次のようにデザインされています。

id=banner
ブログタイトル(h1)
ブログ説明(class=description)

サイトヘッダーに関係のある属性は#banner, h1, .descriptionです。特徴としては、ブログを作成する際に設定した「ブログタイトル」が<h1>タグで、「ブログ説明」が.descriptionで表示されています。

2. 記事のデザイン

記事にはblog, date, blogbody, title, text, postedの6つの属性が使用されています。
シンプルな構造なので比較的コントロールは容易です。

class=blog
記事日付(class=date)
class=blogbody
記事タイトル(class=title)
記事本文(class=text)
投稿者、日付など(class=posted)

3. カレンダーのデザイン

カレンダーには#calendar, calenderhead, calendardayの3つの属性が使用されています。
実際にデザインする際は#calendar tableや#calendar tr、#calendar aなどのネストを活用することになります。

id=calender
年月(class=calendarhead)
曜日(class=calendarday)
日(class=calendarday)

4. サイドバーに表示するコンテンツのデザイン

新着記事、カテゴリ、過去ログ、記事検索、最近のコメント、最近のトラックバックなどサイドバーに表示するコンテンツの多くはこのデザインです。共通のsidetitle, sideを用いているのでデザイン管理が容易です。

タイトル(class=sidetitle)
リンク一覧(class=side)
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > スタイルシート カスタマイズ > コンテンツのデザイン
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他