クラシックエディタ（テキスト）のスタイルガイド

クラシックエディタ（テキスト）は、HTMLやCSSを直接入力してコンテンツを作成できるエディタです。
一部のクイックタグは上部のパネルから利用できますが、基本的にはご自身でHTMLを入力して作業するエディタです。

HTMLやCSSに明るい方向けのエディタ: CSSで微調整が出来る点はテキストエディタの利点です。
「カスタムCSS/JS」やカスタマイザーの「追加CSS」をうまく利用してオリジナルのエディタを作りましょう。

子テーマでCSSを追加する

テーマのアップデートに対応できるように、オリジナルのCSSは子テーマ側で設定すると便利です。
子テーマの導入は以下からご確認ください。

SYN（シン）の子テーマを設定しましょう

カスタマイズには「子テーマ」の使用がオススメSYN（シン）をカスタマイズするご予定の方には、あらかじめ「子テーマ」のご利用をおすすめします。子テーマを使う最大の･･･

SYN（シン）マニュアル

「style.css」の編集

SYN（シン）の子テーマには「style.css」ファイルが用意されています。
追加でCSSを記述したい場合は、こちらのファイルに追記してください。

見出し（h2）

<h2>見出し（h2）</h2>

見出し（h3）

<h3>見出し（h3）</h3>

見出し（h4）

<h4>見出し（h4）</h4>

見出し（h5）

<h5>見出し（h5）</h5>

余白調整のCSS

余白の調整に利用できる汎用的なCSSです。

.m0 { margin:0!important; }
.m0-t { margin-top:0!important; }
.m0-r { margin-right:0!important; }
.m0-b { margin-bottom:0!important; }
.m0-l { margin-left:0!important; }
.m10 { margin:10px!important; }
.m10-t { margin-top:10px!important; }
.m10-r { margin-right:10px!important; }
.m10-b { margin-bottom:10px!important; }
.m10-l { margin-left:10px!important; }
.m20 { margin:20px!important; }
.m20-t { margin-top:20px!important; }
.m20-r { margin-right:20px!important; }
.m20-b { margin-bottom:20px!important; }
.m20-l { margin-left:20px!important; }
.m30 { margin:30px!important; }
.m30-t { margin-top:30px!important; }
.m30-r { margin-right:30px!important; }
.m30-b { margin-bottom:30px!important; }
.m30-l { margin-left:30px!important; }
.m60-t { margin-top:60px!important; }
.m60-b { margin-bottom:60px!important; }
.m120-t { margin-top:120px!important; }
.m120-b { margin-bottom:120px!important; }

フォントサイズのCSS

太字やフォントサイズの調整に利用できる汎用的なCSSです。

<span class="b">太字</span>や
<span class="f12em">フォントサイズ</span>の調整に利用できる汎用的なCSSです。

.b { font-weight:700; }
.f20em { font-size:2em; }
.f18em { font-size:1.8em; }
.f16em { font-size:1.6em; }
.f14em { font-size:1.4em; }
.f12em { font-size:1.2em; }
.f08em { font-size:0.8em; }

CSSを追加したい場合: テーマのデフォルトは上記の設定になっています。
オリジナルCSSを追加したい場合は、「子テーマ」の「style.css」に追加してご利用ください。

テキストの寄せ（左寄せ、中央寄せ、右寄せ）

右寄せのテキスト

<p class="al-r">右寄せのテキスト</p>

.al-l { text-align:left; }
.al-c { text-align:center; }
.al-r { text-align:right; }

フロート

.alignleft {
  float:left;
  margin-left:0;
  margin-bottom:2rem;
}
.alignright {
  float:right;
  margin-right:0;
  margin-bottom:2rem;
}
.alignfull {
  clear:both!important;
}

画像のフロート

img.aligncenter {
  display:block;
  margin:0 auto;
}
img.alignleft {
  float:left;
  margin:0 1em 0 0;
}
img.alignright {
  float:right;
  margin:0 0 0 1em;
}

マーカー

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

<p><span class="synx-marker is-yellow">テキストテキストテキスト</span></p>
<p><span class="synx-marker is-orange ">テキストテキストテキスト</span></p>
<p><span class="synx-marker is-sky ">テキストテキストテキスト</span></p>
<p><span class="synx-marker is-green ">テキストテキストテキスト</span></p>

三角のあしらい

テキスト

<p class="is-style-triangle">テキスト</p>

テキスト

<p class="is-style-triangle is-color01">テキスト</p>

テキスト

<p class="is-style-triangle is-color02">テキスト</p>

テキスト

<p class="is-style-triangle is-color03">テキスト</p>

テキスト

<p class="is-style-triangle is-color04">テキスト</p>

説明リスト

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color01">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color02">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color03">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color04">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

説明リスト：囲み

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-style-outline">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color01 is-style-outline">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color02 is-style-outline">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color03 is-style-outline">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

dtタイトル: dtの内容を説明するテキスト

<dl class="synx-block-dl is-color04 is-style-outline">
<dt class="synx-block-dl__dt">dtタイトル</dt>
<dd class="synx-block-dl__dd">dtの内容を説明するテキスト</dd>
</dl>

テーブル

見出し部分	見出し部分	見出し部分	見出し部分	見出し部分
内容	内容	内容	内容	内容
内容	内容	内容	内容	内容

<div class="synx-tbl">
<table>
<thead>
<tr>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>

横スクロールのテーブル

見出し部分	見出し部分	見出し部分	見出し部分	見出し部分
内容	内容	内容	内容	内容
内容	内容	内容	内容	内容

<div class="synx-scroll-hint__all" aria-hidden="true">スクロールできます</div>
<div class="synx-tbl is-scroll-all" style="--table-width: 1200px;">
<table>
<thead>
<tr>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>

ふきだし

表示名

吹き出しのテキストを入力

[balloon id="1" name="表示名"] 吹き出しのテキストを入力 [/balloon]

ブログカード

クラシックエディタ（テキスト）のスタイルガイド

クラシックエディタ（テキスト）は、HTMLやCSSを直接入力してコンテンツを作成できるエディタです。一部のクイックタグは上部のパネルから利用できますが、基本的に･･･

SYN（シン）マニュアル

[blogcard url="記事のURL"]

リンク

矢印アイコンのリンク

<p><a class="synx-link-arrow" href="#">矢印アイコンのリンク</a></p>

ボタンのテキスト

<p class="al-c"><a class="synx-btn is-gradation" href="#">ボタンのテキスト</a></p>

ボタンのテキスト

<p class="al-c"><a class="synx-btn is-outline" href="#">ボタンのテキスト</a></p>

カラム

<div class="synx-column-2">
<div><img src="画像のURL" alt="" width="100%"></div>
<div><img src="画像のURL" alt="" width="100%"></div>
</div>

<div class="synx-column-3">
<div><img src="画像のURL" alt="" width="100%"></div>
<div><img src="画像のURL" alt="" width="100%"></div>
<div><img src="画像のURL" alt="" width="100%"></div>
</div>

PC、スマホの非表示

<div class="is-visible-pc">
PCユーザーに表示（スマホでは非表示）
</div>

<div class="is-visible-mb">
スマホユーザーに表示（PCでは非表示）
</div>

クラシックエディタ（テキスト）のスタイルガイド

子テーマでCSSを追加する

「style.css」の編集

見出し（h2）

見出し（h3）

見出し（h4）

見出し（h5）

目次

余白調整のCSS

フォントサイズのCSS

テキストの寄せ（左寄せ、中央寄せ、右寄せ）

フロート

画像のフロート

マーカー

三角のあしらい

説明リスト

説明リスト：囲み

リスト

テーブル

横スクロールのテーブル

ふきだし

ブログカード

リンク

カラム

PC、スマホの非表示

関連記事 Relation Entry

ブロックエディタの独自機能について

クラシックエディタ（ビジュアル）のスタイルガイド

SYN（シン）の基本スタイル一覧