トライアーチ

ノウハウ

HOME > ノウハウ > WordPress向けCSS記述方法

各ページをビジュアルエディターで編集することを前提とした場合はメインコンテンツ部分はdivやタグ要素ごとのclass指定を行わず、親要素を元にしたCSS記述をおすすめしております。

ビジュアルエディタのみでの対応が難しい記述

例えば以下のようにdivを用いたり、タグ要素ごとにclass指定を行う場合はテキストエディタからの編集となります。

.ttl_headline
.cmn_txt
.cmn_list
<div class="main_content">
  <!-- WordPress更新部分 -->
  <div class="ttl_headline">
    <h1>タイトルが入ります</h1>
  </div>
  <p class="cmn_txt">テキストが入ります</p>
  <ul class="cmn_list">
    <li>箇条書きリスト</li>
    <li>箇条書きリスト</li>
    <li>箇条書きリスト</li>
  </ul>
  <!-- WordPress更新部分 -->
</div>

ビジュアルエディタのみで対応をしやすい記述

例えば以下のようなCSS記述であれば、ビジュアルエディタからの再現度が高くなります。

.main_content h1
.main_content p
.main_content ul
<div class="main_content">
  <!-- WordPress更新部分 -->
  <h1>タイトルが入ります。</h1>
  <p>テキストが入ります。</p>
  <ul>
    <li>箇条書きリスト</li>
    <li>箇条書きリスト</li>
    <li>箇条書きリスト</li>
  </ul>
  <!-- WordPress更新部分 -->
</div>

これはWordPressのビジュアルエディタではタグがサポートとなるためです。

WordPressサイト制作・構築はトライアーチ。静的HTMLをWordPress化は格安料金39,800円!初回限定総額10%OFFキャンペーン実施中!制作会社様向けサービスあり。保守・管理・更新代行も承ります。

ページトップへ