« 2005年4 月 | メイン

ブログ・ページ構造

Home

TypePadブログ・ページの構造

以下は、TypePadの公開ブログ・ページの構造例を示しています。この中では、このページのdiv階層、および各div階層下にidと該当箇所にclass名を記述します。このページはTypePadのカスタムCSS機能と共に使います。カスタムCSSを使うと、上級者向けテンプレートに変換しなくても、ブログの外見や雰囲気をカスタマイズすることができます。

HTML Layout

<body>
    <div id="container">
        <div id="container-inner" class="pkg">
            <div id="banner">
                <div id="banner-inner" class="pkg">
                    <h1 id="banner-header">Weblog Name</h1>
                    <h2 id="banner-description">Weblog Description</h2>
                </div>
            </div>
            <div id="pagebody">
                <div id="pagebody-inner" class="pkg">
                    <div id="alpha">
                        <div id="alpha-inner" class="pkg">
                        </div>
                    </div>
                    <div id="beta">
                        <div id="beta-inner" class="pkg">
                        </div>
                    </div>
                    <div id="delta">
                        <div id="delta-inner" class="pkg">
                        </div>
                    </div>
                    <div id="gamma">
                        <div id="gamma-inner" class="pkg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Graphical Layout

body
#container
#container-inner, .pkg
#banner
#banner-inner, .pkg
h1 #banner-header
h2 #banner-description
#pagebody
#pagebody-inner, .pkg
#alpha .pkg
#alpha-inner .pkg
#beta .pkg
#beta-inner .pkg
#delta .pkg
#delta-inner .pkg
#gamma .pkg
#gamma-inner .pkg

Copyright © 2003-2005 Six Apart

[top]

2005-09-13 in classes | Permalink

Amazonウィッシュリストを表示する

ホーム

Amazonウィッシュ・リストを表示する

Amazonウィッシュ・リストをウェブログのサイドバーに加えることができます。手順は以下のとおりです。

1) サイドバーのコンテンツを編集します。
ウェブログの「デザイン」タブの「現在のデザインを編集」ページにある「表示項目」の「表示項目」をクリックします。「表示項目を変更」ページを下方にスクロールすると、「サイドバーのコンテンツ」に「Amazonウィッシュ・リスト」があります。

2) 設定ウィンドウを開きます。
Amazonウィッシュ・リストのリンクは、テンプレートの表示項目に加える前に設定する必要があります。「Amazonウィッシュ・リスト」の下にある「設定」リンクをクリックして設定ウィンドウを開きます。

3) あなたのAmazonウィッシュ・リストを見つけます。
Amazonのウィッシュ・リストの登録に使ったメールアドレスを入力し、「検索」をクリックします。Amazonウィッシュ・リストが見つかると、Amazonウィッシュ・リストの情報とリンクが表示されます。そしてそのリンクをクリックすると、新しいウィンドウにAmazonウィッシュ・リストが表示されます。それが正しいリストの場合は「続ける」をクリックしてください。違う場合は「Search Again（再検索）」をクリックして別のメールアドレスで検索します。それでもウィッシュ・リストが見つからない場合は、別のメールアドレスを入力して再びトライします。

4) Amazonウィッシュ・リストのタイトルを入力します。
ウィッシュ・リストを特定できたら、タイトルを入力します。このタイトルは、ウェブログのサイドバーで、ウィッシュ・リストの上に表示されます。

5) ウィッシュ・リストから最大何アイテムまで表示するかを指定します。
ウィッシュ・リスト・リンクに表示する最大アイテム数を、2、4、6、および8から選択します。

6) ウィッシュ・リストの設定を保存します。
ウィッシュ・リストのタイトルと最大表示数を入力したら、「変更を保存」をクリックします。ウィッシュ・リストの設定ウィンドウが閉じます。

7) Amazonウィッシュ・リストを公開します。
一度Amazonウィッシュ・リスト・リンクを設定すると、「サイドバーのコンテンツ」にある「Amazonウィッシュ・リスト」のチェックボックスが自動的にチェックされます。ページの一番下にある「変更を保存」をクリックします。するとウィッシュ・リストがウェブログで公開されます。

Amazonの仕様の変更により画像が表示されなくなりました。リンク切れを防ぐためにはCSSで画像リンクの部分を非表示にしてください。

サイドバーでAmazonウィッシュ・リストの表示位置を変えるには？

Amazonウィッシュ・リストも含めて、サイドバーのモジュールの位置を変えるには、ウェブログの「デザイン」タブの「現在のデザインを編集」ページにある「表示項目」の「並べ方」をクリックします。そしてウィッシュ・リストを希望する位置にドラッグします。

複数のAmazonウィッシュ・リストがあるんだけど、違うウィッシュ・リストをサイドバーに表示するにはどうしたらよいの？

1) サイドバーのコンテンツを編集します。
ウェブログの「デザイン」タブの「現在のデザインを編集」ページにある「表示項目」の「表示項目を編集する」をクリックします。「表示項目」ページを下方にスクロールすると、「サイドバーのコンテンツ」に「Amazonウィッシュ・リスト」があります。

2) 設定ウィンドウを開きます。
「Amazonウィッシュ・リスト」の下にある「設定」リンクをクリックして設定ウィンドウを開きます。

3) Amazonウィッシュ・リストを変更します。
現在のウィッシュ・リストに登録しているメールアドレスの横に「Change Email（メールアドレスを変更）」リンクがあります。これをクリックして別のメールアドレスを入力し、違うウィッシュ・リストを検索します。

Amazonウィッシュ・リストが見つかると、Amazonウィッシュ・リストの情報とリンクが表示されます。そしてそのリンクをクリックすると、新しいウィンドウにAmazonウィッシュ・リストが表示されます。それが正しいリストの場合は「続ける」をクリックしてください。違う場合は「Search Again（再検索）」をクリックして別のメールアドレスで検索します。それでもウィッシュ・リストが見つからない場合は、別のメールアドレスを入力して再びトライします。

4) Amazonウィッシュ・リストのタイトルを入力します。
目的のAmazonウィッシュ・リストが見つかったら、タイトルを入力します。なお、前のウィッシュ・リストのタイトルは保存されていません。このタイトルは、ウェブログのサイドバーで、ウィッシュ・リストの上に表示されます。

5) ウィッシュ・リストから最大何アイテムまで表示するかを指定します。
ウィッシュ・リスト・リンクに表示する最大アイテム数を、2、4、6、および8から選択します。前のウィッシュ・リストの設定は保存されていません。

6) ウィッシュ・リストの設定を保存します。
ウィッシュ・リストのタイトルと最大表示数を入力したら、「変更を保存」をクリックします。ウィッシュ・リストの設定ウィンドウが閉じます。

7) 新しいAmazonウィッシュ・リストを公開します。
ページの一番下にある「変更を保存」をクリックします。新しいウィッシュ・リストは前のウィッシュ・リストの場所で公開されます。

どうやってウェブログからAmazonウィッシュ・リストを除くの？

ウェブログの「デザイン」タブの「デザインを選択」ページにある「現在のデザインを編集」ページにある「表示項目」の「表示項目の編集」をクリックします。「表示項目」ページを下方にスクロールすると、「サイドバーのコンテンツ」に「Amazonウィッシュ・リスト」があります。「Amazonウィッシュ・リスト」チェックボックスのチェックを外し、ウェブログを再構築します。

どうして、「表示項目」ページの「サイドバーのコンテンツ」に「Amazonウィッシュ・リスト」がないの？

お客様がミックスドメディア・テンプレートをウェブログにお使いの場合は、Amazonウィッシュ・リストを一緒に使うことができません。現在のところ、Amazonウィッシュ・リストは従来のテンプレートを使ったウェブログだけにご使用いただけます。


Copyright © 2003-2005 Six Apart

[先頭へ戻る]

2005-09-11 in wish_list | Permalink

ブログ　カスタム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

コメント・フォーム

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

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

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

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

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