ブログ・ページ構造
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 |