HOME  /WordPress(応用)
 /ビジュアルエディタとHTTP表示を一致させる方法
2017年10月30日

ビジュアルエディタとHTTP表示を一致させる方法

現在の子テーマのファイル構造は下記の様になっています。

ビジュアルエディタの表示と、HTTP表示を一致させる為には「my_editor-style.css」と「style.css」のCSSを一致させる必要があります。

しかし、ここで注意しなければならない点は下記になります。

①ビジュアルエディタのCSS(my_editor.style.css)は、コンテンツエリアだけのCSSである。

②一方、HTTP表示のCSS(style.css)は、コンテンツエリア以外のヘッダーやページにも使うCSSである。

よって両方のCSSを一致させるとは「editor.style.css」の定義を「style.cssの一部の所」に取り込む事を意味しています。

1.style.cssへの記述内容

上記にも述べたようにstyle.cssには、ヘッダー等のCSSに加えて、コンテンツ領域のCSSが記述されます。

これを1つのCSSファイルで管理しても良いのですが、下記の様に2つに分けて管理した方が管理が容易になります。

1-1.style.cssへの記述内容

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/
@charset "UTF-8";
/***********************************************/
/* 関連スタイルシートの読み込み
/***********************************************/
@import url('css/style.css');
@import url('css/editor-style.css');

※1.CSSフォルダにあるstyle.cssがコンテンツエリア以外の内容を記述するCSS

※2.CSSフォルダにあるeditor-style.cssがコンテンツエリアの内容を記述するCSS

以上の結果、ファイル構造は下記になります。

すなわち、ビジュアルエディタのCSSとHTTP表示のCSSを合わせるとは、「my_editor-style.css」とCSSフォルダにある「editor-style.css」の内容を一致させる事になります。

2.各スタイルシートへの記述内容

具体的には下記の様に記述していきます。

2-1.my_editor-style.cssへの記述

<サンプルCSS>ビジュアルエディタで利用する各種スタイルを登録します。

h2{
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}

2-2.css¥editor-style.cssへの記述方法

本サイトでは下記の様にclass=”contents“で、コンテンツを呼び出しています。

<?php while ( have_posts() ) : the_post(); ?>
	<div class='contents'>
		<?php the_content(); ?>
	</div>
<?php endwhile;?>

よって「css¥editor-style.css」には各設定の前に.entry-contentを付ける事によって、ビジュアルエディタで記述したフォーマットと同じ形式でHTTP表示が可能になります。

<サンプルCSS>

.contents h2 {
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}

3.その他の注意事項

 メモ

<div class=’contents’><?php the_content(); ?></div>

上記の様に要素に付ける名前には「class=’××’」「ID=’××’」があります。

ID名は、表示された画面の中で1回しか使えない名前

class名は、表示された画面の中に複数回使う事ができる名前

になります。

よってmy_editor-style.cssは、コンテンツ領域で使う要素を指定している所なので、使われる名前は複数回でも利用できるクラス指定が基本となります。

ID名はHeader等の様に1回しか呼ばれない所に使われます。