TypePad ユーザーマニュアル／ブログ: classes

以下は、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

TypePadブログ・ページの構造

HTML Layout

Graphical Layout