« ブログ WYSIWYGエディタ | メイン | Amazonウィッシュリストを表示する »

ブログ　カスタムCSS

Home

カスタムCSS

カスタムCSSについて

カスタムCSSはプロ・プランでご利用いただける機能で、これを使うと、上級者向けテンプレートに変換しなくても、ブログの外見や雰囲気、レイアウト、およびデザインをカスタマイズすることができます。

カスタムCSSを使う理由

上級者向けテンプレートを使うようにデザインを変換すると、ページのHTMLに直接変更を加えられる機能と引き換えに、特定のブログ・デザインや設定機能を諦めなくてはならなくなります。ブログ・デザインを変更するのにカスタムCSSを使うと、こうした機能をすべて維持でき、かつ、TypePadのデザイン機能やその他の機能をすべて使えるので便利です。

カスタムCSSの使い方

カスタムCSS機能を使うには、それを適用するブログの「デザイン」ページに行きます。そして「レイアウトを変更」と「テーマを変更」のリンクがある箇所の「カスタムCSSを編集」リンクをクリックします。すると大きなテキスト・フィールドが表示されます。そこにカスタムCSSの情報を入力します。

入力した情報は、既存のスタイルシートの最後に追加されます。これによって、カスタムCSSのプロパティはどれも、どこかで定義された既存のCSSプロパティに取って代わります。

TypePadのCSSスタイルとクラス・レファレンス

上級者向けテンプレートを使っていないTypePadのブログはすべて、できるだけ柔軟性と拡張性を持たせるために、共通した1ページとHTML構造を共有しています。このドキュメントでは以下に、カスタムCSS機能を有効に利用していただけるよう、その共通ページの構造について解説します。

ページ構造の概要

ブログの各HTMLページは、それがメインページの場合でも、アーカイブ・ページや個別ページやその他のページの場合でも、すべて同じ構造をしており、使うマークアップ言語や階層のパターンも同一です。

ブログのページ構造は、以下のいずれかの形式で表示できます。

内側と外側のDiv

ほとんどすべてのページ要素は、外側のコンテナに内側のコンテナがある2重構造になっています。この方法は冗長なスタイルが多いように見えますが、以下の利点があります。

  • 外側のコンテナは要素の寸法を指定し、内側コンテナではバディングや枠線の値を指定します。この方法によってこうした値を、種々の不可解なCSSトリックを使うことなく、指定できるので便利です。
  • スライディング・ドア（引き戸）背景画像トリックのフックを提供し、たとえば、ボックスの左上と右下の境界線に異なる画像を指定できます。
  • グローバル・ページの背景に使えるフックを多く提供し、より豊かでダイナミックな多様性あるブログ・デザインが可能になります。

ページ要素

ブログ・デザインはどれも以下のページ要素から成ります。

コンテナ

コンテナdivはページ全体を囲み、グローバル・レベルでページのスタイルや位置を統一するのに必要なフックを提供します。

バナー

ページ・バナーはブログの名前と説明を含みます。デザイナーはよくバナーの中にブログに関連付けたロゴやグラフィックのページ・ヘッダーを使います。

ページ・ボディ

ページ・ボディは、タイプリスト、エントリー、トラックバック、コメント、サイドバー・コンテンツ・モジュールなどのブログ・コンテンツをすべて囲みます。

ブログの列：Alpha、Beta、Delta、およびGamma

１つのブログに、いくつかのコンテンツ・エリアが存在することはよくあります。ブログのレイアウトが複数列から成る場合、それぞれの列は、alpha、beta、delta、およびgamma.のIDを使った、4つのdivの1つになります。

これらのコンテンツ・エリアの名称は、世界的に使い方が曖昧で、一定の順番で記述するとか、それぞれに固有のコンテンツを含める、などの規定はありません。

TypePadでは、これらコンテンツ・エリアのコンテンツは、「ブログ」タブの「デザイン」ページで指定したコンテンツ・モジュールのレイアウトによります。

エントリー・コンテンツ

エントリーとはあなたが書くブログ・コンテンツのことで、各エントリーには以下の要素が含まれます。

  • エントリー・ヘッダーまたはタイトル
  • エントリーの内容
  • エントリーの追記または追記へのリンク
  • エントリーのフッター： 個別ページへのリンク、エントリー投稿日、エントリー投稿者など

エントリーは以下のクラスとdiv構造を持っています。

div.entry
    h3.entry-header
    div.entry-content
        div.entry-body
        (div.entry-more OR p.entry-more-link)
    p.entry-footer

.entry-bodyと.entry-moreのdivがブログ・エントリーの枠組みを作ります。不正なフォーマットのエントリーによって、残りのページのレイアウトやスタイルが崩れないように、細心の注意を払ってください。

注：TypePadのWYSIWYGエントリー作成インターフェイス、または有効なXHTMLを使って、できる限りエントリーによるブログ・レイアウトの崩れを防いでください。

閲覧者からのフィードバック

ブログは、コメントやトラックバックなどの閲覧者からのフィードバックがあってこそブログらしさを発揮するものです。そして通常、エントリーの後には閲覧者のフィードバックが続きます。以下に、これらのフィードバックを表示・投稿するのに必要な要素のクラスやスタイルを説明します。

コメント

以下は、1つのエントリーに対するすべての公開コメントをグループ化します。

a#comments (for hash-links)
div.comments
    h3.comments-header
    div.comments-content
        (the following sections are per-comment and repeat)
        div.comment
             div.comment-content
             p.comment-footer

コメント・フォーム

エントリーがコメントを受け付けているとき、または"open"であるとき、フォームとテキストが通常表示されます。以下はそのフォームとコンテンツをグループ化します。

div.comments-open
    h3.comments-open-header
    div.comments-open-content
        form
    div.comments-open-footer

受け付けていないコメント

エントリーがコメントを受け付けていないとき、またはコメントが"closed"の状態であるとき、つまり、閲覧者にとって以前の公開コメントは読めても新しくコメントを投稿できない状態のときには、「このエントリーへのコメントは終了しました。」のテキストが通常、表示されます。以下はそのコンテンツをグループ化します。

p.comments-closed

トラックバック

以下はブログに公開されるすべてのトラックバック・データをグループ化します。

div.trackbacks
    a#trackback (for hash-link on page)
    h3.trackbacks-header
    div.trackbacks-info
    div.trackbacks-content
        div.trackback
            div.trackback-content
            p.trackback-footer

コンテンツ・モジュール

コンテンツ・モジュールとは、アーカイブ・リスト、コメント、トラックバックを除くすべてのコンテンツを意味し、通常ブログのサイドバー、つまり左側や右側の列に位置します。

コンテンツ・モジュールはどれも同じ基本構造を取ります。それぞれが、次の要素に対応するdivを持ちます。

  • コンテナ
  • ヘッダー
  • コンテンツ

モジュールのレイアウト

モジュールは、container div、header、およびcontent divを使い、コンテンツ・エリアと同じ基本的レイアウトを取ります。各コンテンツ・モジュールには、そのほかにclassnameがあり、モジュールによる通常のスタイル指定のほか、固有のスタイルも指定できます。

div.module-<type>.module
    h2.module-header
    div.module-content
        ul.module-list

もちろん、すべてのコンテンツ・モジュールが上の例のようにリスト・フォーマットを利用しているわけではありませんが、実際、コンテンツ・モジュールのコンテンツには任意のHTMLを含めることができます。

タイプリスト

タイプリストには通常、「リンク」リストや「ひと」リストのようにテキストのリストと、「音楽」リストや「本」リストのようにサムネイルから成るリストの2種類があります。

Text-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content
        ul.module-list

Thumbnail/Image-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content typelist-thumbnailed
        ul.module-list
            li (repeat)
                div.typelist-thumbnail
                div.typelist-description

アーカイブ・リストのコンテンツ・モジュール

TypePadでは主に3つのアーカイブ・リストをサポートします。以下のスタイル情報はその3つのすべてに適用します。

  • 日付ベース(Date Based)
  • カテゴリー・ベース(Category Based)
  • 個別(Individual)
div.archive (OR multiply-classed div.archive-date-based.archive)
    h2.archive-header
    div.archive-content
        ul.archive-list

エントリーと同様、全体を囲むdiv、ヘッダー、コンテンツdivがあるほか、スタイル・リストがあります。エントリー・ヘッダーのルールも同様にアーカイブ・リストへ適用されます。

最近の写真

ミックスドメディア・レイアウトのアートとタイムライン、モブログ1、およびモブログ2には、「最近の写真」モジュールがあります。これは、タイプリストの一つで各liの下にa/imgの入れ子のペアが入ります。

div.module-recent-photos.module
    h2.module-header
    div.module-content
        ul.module-list
            li (repeat)
                a
                    img

通常、「最近の写真」のスタイルはすべてのレイアウトで同じですが、"li"のマージン、モジュール・コンテンツのパディング/マージン、および「最近の写真」モジュールの背景処理が異なることがあります。

カテゴリー

カレンダー・コンテンツ・モジュールは、テーブルを利用する数少ないコンテンツ・モジュールの一つです。以下の2種類があります。

  • クラシック・カレンダー(.module-calendar)
  • ミックスドメディア・テンプレート・カレンダー (.module-mmt-calendar)

Copyright © 2003-2005 Six Apart

[top]

2005-09-10 in custom_css | Permalink