TypePad マニュアル

user_css : インデックス・テンプレート :

『 user_css 』は、カスタムCSSでデザインするための基本CSSです。内容をカスタマイズしたら、同じテンプレート名( user_css)で上書き保存してください。オリジナルなテンプレートを作成する場合は、この標準テンプレートをベースに、カスタマイズをするのが楽でしょう。

関連モジュール・テンプレート

テンプレートの内容

/*
カスタムCSSについて

TypePadのブログをカスタマイズする、代表的なCSS指定は、コメントアウトとして記述されています。コメントアウトを解除することで、CSS指定を有効にすることができます。TypePadのカスタムCSS講座も参照ください。
http://www.sixapart.jp/typepad/inside/2005/12/001261.html
http://support.typepad.jp/cgi-bin/typepad_jp.cfg/php/enduser/std_adp.php?p_faqid=373

CSSの詳しい記述方法については、WEBサイトや書籍などを、参考にしてください。
*/

/*
指定しているのにうまくいかない場合

CSSセレクタの個別性が原因でうまく指定が反映されない可能性があります。セレクタの個別性順序は以下のようになります。

*         { color: black; }
span        { color: blue; }
p span      { color: green; }
span.memo   { color: red; }
span#memo { color: gray; }

の場合、<p><span class="memo" id="memo">サンプル</span></p>の『サンプル』という文字は上記セレクタの順序がちがっても、グレーになります。
指定が反映されない原因が、セレクタの個別性かどうか確認するには、優先させたいプロパティの値のあとに、! important と追加して指定してみてください。

例)

span { color: red ! important; }

*/



/* ブログのバナー背景部分に画像を指定 */
/* 

div#banner
{
  background-image: url(http://example.typepad.jp/sample_design/myimages/background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  text-align: right;
}

*/

/* バナー部分の中身 */
/*
div#banner-inner {}
div#banner-inner h1#banner-header {}
div#banner-inner h2#banner-description {}
*/

/* ページの各部分の指定 */
/* 詳しくは http://support.typepad.jp/cgi-bin/typepad_jp.cfg/php/enduser/std_adp.php?p_faqid=374 */
/*
body {}
div#container {}
div#container div#container-inner {}

div#pagebody {}
div#pagebody div#pagebody-inner {}

div.entry {}
div.entry h3.entry-header {}
div.entry div.entry-content {}
div.entry div.entry-content div.entry-body {}
div.entry p.entry-footer {}
*/

/* レイアウト毎に異なる指定 */
/* 1カラム */
/*
body.layout-one-column div#alpha {}
body.layout-one-column div#alpha-inner {}
*/
/* 2カラム (左サイドバー = alpha | 本文 = beta) */
/*
body.layout-two-column-left div#alpha {}
body.layout-two-column-left div#alpha-inner {}
body.layout-two-column-left div#beta {}
body.layout-two-column-left div#beta-inner {}
*/

/* 2カラム (本文 = alpha | 右サイドバー = beta) */
/*
body.layout-two-column-right div#alpha {}
body.layout-two-column-right div#alpha-inner {}
body.layout-two-column-right div#beta {}
body.layout-two-column-right div#beta-inner {}
*/

/* 3カラム (左サイドバー = alpha | 本文 = beta | 右サイドバー = gamma) */
/*
body.layout-three-column div#alpha {}
body.layout-three-column div#alpha-inner {}
body.layout-three-column div#beta {}
body.layout-three-column div#beta-inner {}
body.layout-three-column div#gamma {}
body.layout-three-column div#gamma-inner {}
*/

/* サイドバー・モジュールの指定 */
/*
div.module {}
div.module h2.module-header {}
div.module div.module-content {}
div.module-content ul.module-list {}
div.module-content ul.module-list li.module-list-item {}
*/



      

[ テンプレート一覧に戻る ] [ モジュール一覧に戻る ]