TCDテーマAMORE：固定ページをデモサイトのようにデザイン・レイアウトする方法

Q.固定ページのテキストや画像のレイアウトがデモサイトのようにならないのですが？

新しく固定ページを作成する場合、デモサイトのような見出し・本文の種類（色など）にならないのですが、同じにするには設定が必要ですか？

A.デモサイトでは、下記のようなカスタムCSSを個別に設定しています

.article, .article p { color:#000000 !important; font-size:13px;
line-height:2.4; }
.article { margin-bottom:80px; }
#t01, #t02, #t03 { padding-top:110px !important; margin-top:-110px !important; }
ul { margin:0; padding-left:1.5em;}
ol  { margin:0; padding-left:2em;}
ul li,  ol li {line-height:1.6; margin-bottom:1em;}
ul li span, ol li span {display:block; color: #555;
font-size:12px;line-height:1.4;}
.page_headline1 { margin-bottom:1.1em !important; color:#248c01;
font-size:30px; line-height:1.6; font-weight:500;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.page_headline2 { margin-bottom:1em !important; font-size:24px;
line-height:1.6; font-weight:bold; }
.page_headline3 { margin: 2.4em 0 1em !important; font-size:16px;
line-height:1.6; font-weight:bold; }

また固定ページは、以下のような記述になります。

<div class="col-xs-120">
<h3 id="t01" class="page_headline1">見出し</h2>
<h4 class="page_headline2">
タイトル
</h4>
説明
</div>


<div class="col-md-60 col-xs-120">
<img src="http://●●●" alt="●●●" width="495" height="350"
class="alignnone size-full wp-image-●●●" />
<h5 class="page_headline3">●●●</h5>
<ul class="col_list">
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
</ul>
</div>

<div class="col-md-60 col-xs-120">
<img src="http://●●●" alt="●●●" width="495" height="350"
class="alignnone size-full wp-image-●●●" />
<h5 class="page_headline3">●●●</h5>
<ol class="col_list">
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●<br />
●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
</ol>
</div>


<div class="col-xs-120 mt80">
<h3 id="t02" class="page_headline1">見出し</h3>
<h4 class="page_headline2">
タイトル
</h4>
<p class="mt30">
説明
</p>
</div>

<div class="col-md-60 col-xs-120">
<img src="http://●●●" alt="●●●" width="495" height="353"
class="alignnone size-full wp-image-●●●" />
<h5 class="page_headline3">●●●</h5>
<ol class="col_list">
<li>Aperitivo
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<li>●●●
<span>●●●<br />
●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
</ol>
</div>

<div class="col-md-60 col-xs-120">
<img src="http://●●●" alt="●●●" width="495" height="353"
class="alignnone size-full wp-image-●●●" />
<h5 class="page_headline3">●●●</h5>
<ol class="col_list">
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span>
<span>●●●</span></li>
<li>●●●
<span>●●●<br />
●●●</span></li>
<li>●●●
<span>●●●</span></li>
<li>●●●
<span>●●●</span></li>
</ol>
</div>


<div class="col-xs-120 mt80">
<h3 id="t03" class="page_headline1 mt80">見出し</h3>

<h4><img src="http://●●●" alt="●●●" width="1052" height="300"
class="alignnone size-full wp-image-●●●" /></h4>
<p class="mt30 mb0">
説明
</p>
</div>


<div class="col-md-60 col-xs-120 mt0">
<h5 class="page_headline3 mt0">●●●</h5>
<ul class="col_list">
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
</ul>

<h5 class="page_headline3">●●●</h5>
<ul class="col_list">
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
</ul>
</div>

<div class="col-md-60 col-xs-120">
<h4 class="page_headline3 mt0">●●●</h4>
<ul class="col_list">
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
<li>●●●<span>●●●</span></li>
</ul>
<h4 class="page_headline3">●●●</h4>
<ul class="col_list">
<li>●●●<span>●●●</span></li>
</ul>
</div>