エディターのスタイル【高度な使い方】

この記事では、エディタスタイルの高度な使い方について、解説しています。

高度な使い方とはどんな使い方？

1. スタイルの名前を利用する。
2. テキストエディタ（HTML）で装飾を編集する。
3. ビジュアルエディタで編集した内容を確認する。

HTMLやCSSの知識がない方にとっては、少し難しく感じるかもしれませんが、できるかぎり、わかりやすく解説していきますので安心してくださいね。

まずは、簡単にエディタの仕組みから説明します。

エディターの仕組み

WordPressで、投稿や固定ページなどを編集する際に使っているのがエディターです。

エディタには、「ビジュアルエディタ」と「テキストエディタ」の2種類あります。

「THE THOR（ザ・トール）」では、ビジュアルエディタの編集ページ＝公開ページとなるように設定されているので公開後のイメージがつかみやすい。

テーマによっては、マーカーやボックスなどの装飾を行っても、ビジュアルエディタに表示されないものもあるので、初めて使う方にも優しい設計となっています。

また、WordPressは、「ビジュアルエディタ」で編集した内容が、同時に「テキストエディタ」にHTML情報として記述されます。

簡単に装飾が行えるツール「スタイル」

ザ・トールには、簡単に装飾（デザイン）が行える「スタイル」というツールが用意されています。

使い方は、いたってシンプル。ビジュアルエディタの「スタイル」の中から使いたい項目を選択していくだけ。

選んでいくだけなら、HTMLやCSSの知識がなくても、誰もが簡単に操作が行えますよね。

では、「ビジュアルエディタ」の裏側で動いている「テキストエディタ」の内容を見ていきましょう。

（例）マーカー(中)レッド

たとえば、スタイル ＞ マーカー ＞ マーカー(中) ＞ レッド　を使ったとしましょう。

マーカーを引くと「ビジュアルエディタ」では上記のように表示され、「テキストエディタ」では以下のようなHTMLが記述されます。

<span>～</span>は、文字などを装飾する際によく使われるHTMLタグで、「ここからここまで装飾してくださいね」という指示を出しています。

「class=”～”」は、「CSSファイル内の「～」という情報を読み込んでくださいね」という指示になります。

「～」には、「makere-halfRed」のような、CSSファイルに収められている装飾の名前が入ります。

CSSファイルの「.marker-halfRed」には、マーカーの太さ、色などの詳細情報が収められており、これらの情報を読み込むことで、マーカーを引いた装飾を行うことができるのです。

高度な使い方

1. スタイルの名前を利用する。
2. テキストエディタで装飾を編集する。
3. ビジュアルエディタで編集した内容を確認する。

高度な使い方をすると、「スタイル」の中から１つ１つ選択していくよりも、素早く編集が行えるようになります。ただし、慣れは必要。

装飾には、「marker-halfRed」のように１つ１つに名前がつけられています。よく使う色やスタイルなどをメモしておくと役立ちます。

「シンプルボーダーラベル」のスタイルを例に見ていきましょう。

（例）

シンプルボーダーラベル

ビジュアルエディタで、スタイル ＞ ラベル ＞ シンプルボーダーラベル　を選択したものです。これをテキストエディタに切り替えて見てみると次の通りです。

<span class="ep-label es-borderSolidS bgc-white brc-VLgray 
es-RpaddingSS es-LpaddingSS">シンプルボーダーラベル</span>

classの「”」と「”」の間には、「シンプルボーダーラベル」として装飾するためのスタイルの名前が入っています。

全部で６つ入っていますね。それぞれの意味は以下のとおりです。

使い方１．ボーダーの色を変える

シンプルボーダーラベル

ボーダーの色はモノトーン ＞ ベリーライトグレーで、スタイルの名前は「brc-VLgray」です。

「brc-VLgray」は、「brc-」+「VLgray」に分けることができ、「brc-」は「ボーダー」、「VLgray」は「ベリーライトグレー（色の名前）」を意味しています。

つまり、「VLgray」の部分を使いたい色の名前に置き換えることで、ボーダの色を変更することができます。

スタイルにセットされているカラーは全91色です。色の名前は、下の関連記事を参考にしてください。

関連記事

エディタ内スタイルで使用するカラーセット一覧と使い方

この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。 投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。 カラーセット全91色　一覧 […]

それでは、実際にボーダーラインの色を変更してみましょう。

（例）ディープトーンレッド（DPred）に変更する

ディープトーンレッドの名前は「DPred」です。「VLgray」の部分を「DPred」に置き換えます。

シンプルボーダーラベル

<span class="ep-label es-borderSolidS bgc-white brc-DPred
 es-RpaddingSS es-LpaddingSS">シンプルボーダーラベル</span>

使い方２．背景の色を変える

シンプルボーダーラベルの背景は白色で、「bgc-white」で記述されています。「bgc-」は背景色を意味し、「white」の部分を好きな色名に置き換えることで、背景色を変更することができます。

（例）ライトピンク（Lpink）を指定する

ライトピンクの名前は「Lpink」です。「white」を「Lpink」に置き換えます。

シンプルボーダーラベル

<span class="ep-label es-borderSolidS bgc-Lpink brc-DPred
 es-RpaddingSS es-LpaddingSS">シンプルボーダーラベル</span>

使い方３．文字の色を変える・記述のないスタイルを追加する

シンプルボーダーラベルでは、文字色の指定がありませんでしたが、「ftc-」を使うと指定することができます。

もともと記述がなかったスタイル（装飾）を追加したい場合は、「class=””」の「”」「”」の間に記述をします。他の名前と繋がらないように、追加した名前の前後に半角スペースがあることを必ず確認してください。

（例）文字色に白（white）を指定する

白の名前は「white」です。文字色と指定するので「ftc-white」をclassの「”」と「”」の間に追加します。

シンプルボーダーラベル

<span class="ep-label es-borderSolidS ftc-white bgc-Lpink brc-DPred
 es-RpaddingSS es-LpaddingSS">シンプルボーダーラベル</span>

使い方４．ラベルからボックスに変更する

ラベルの名前は「ep-label」です。ボックスに変更したい場合は、「ep-box」を使います。

（例）シンプルボーダーラベルをボックスに変更する

「ep-label」を「ep-box」に置き換えます。

さらに、「span」の部分を「div」に変更します。「span」と「div」の違いを説明すると難しくなるので、ここでは省略します。

「span」のままにしておくと、「テキストエディタ」から「ビジュアルエディタ」に切り替えた際、ボックス内テキストの編集ができなくなるので、必ず変更してください。

<div class="ep-box es-borderSolidS bgc-white brc-VLgray 
es-RpaddingSS es-LpaddingSS">シンプルボーダーボックス</div>

使い方５．ラベルからボタンに変更する

ボタンの名前は「ep-btn」です。また、ボタンは、通常リンク設定を行うので、「span」をリンクを意味するHTMLタグ「a」に置き換えます。

（例）シンプルボーダーラベルをボタンに置き換える

「ep-label」を「ep-btn」に置き換えます。次に「span」「/span」を「a」「/a」に置き換えます。

シンプルボーダーボタン

<a class="ep-btn es-borderSolidS bgc-white brc-VLgray 
es-RpaddingSS es-LpaddingSS">シンプルボーダーボタン</a>

<a class="ep-btn es-borderSolidS bgc-white brc-VLgray es-RpaddingSS 
es-LpaddingSS" href="https://～">シンプルボーダーボタン</a>

使い方６．余白を調整する

シンプルボーダーラベルの余白は、「es-RpaddingSS」「es-LpaddingSS」で指定されていました。

「es-RpaddingSS」を細かく見ていきます。

「R」は右側、「padding」は内側、「SS」は極小を意味しています。これらの値を変えたり、組み合わせたものを追加するだけで、余白の調整を行うことができます。

（例）

右外側の余白を中サイズにする・・・es-RmarginM
上内側の余白を大サイズにする・・・es-TpaddingL

スタイルの名前一覧

ビジュアルエディタの「スタイル」にセットされているマーカーと「スタイルセット」の名前一覧です。

マーカー

（例）マーカー（太）レッド・・・marker-thickRed

▶スタイル「マーカー」の使い方（エディタの使い方）
▶よく使うマーカーを設定する（パーツスタイル設定）

ラベル・ボタン・ボックス

▶【ボックスデザイン】の一覧
▶基本的なボックスの使い方（スタイル）

文字色・背景色・ボーダー色

「-」の後ろにカラーの名前をセットします。

（例）文字色：ヴィヴィッドトーン・イエロー　ftc-Vyellow

関連記事

エディタ内スタイルで使用するカラーセット一覧と使い方

この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。 投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。 カラーセット全91色　一覧 […]

スタイルセット ＞ サイズ系

横幅のサイズを調整します。

（使用例）サイズ50％・・・es-size50

スタイルセット ＞ 余白系

余白を調整します。

（使用例）

• 内側余白トップ極小・・・es-TpaddingSS
• 外側余白レフト中・・・es-LmarginM

スタイルセット ＞ ボーダー系

ボーダーの種類や太さ、位置を設定します。

スタイルセット ＞ 文字系

ラベル・ボックス・ボタンなどのスタイルを利用時に、文字の装飾を行えます。

スタイルセット ＞ シャドウ系

ボックスとテキストに対して影（シャドウ）をつけることができます。

スタイルセット ＞ 角丸系

ボックスやラベルなどの角を丸く設定します。

スタイルセット ＞ 背景系

背景をグラデーションまたは方眼用紙に設定します。

スタイルセット ＞ ラベルパーツ専用

ラベル（ep-label）使用時に利用できるパーツスタイルです。

スタイルセット ＞ ボタンパーツ専用

ボタン（ep-btn）使用時に利用できるパーツスタイルです。

スタイルセット ＞ ボックスパーツ専用

ボックス（ep-box）使用時に利用できるパーツスタイルです。