WordPressテーマTCDのカスタマイズを研究するサイト

固定ページのテキストの装飾やレイアウトについて

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>

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。