AFFINGER BLOG

【クラス名を公開】AFFINGER6をClassic Editorで使用するために

2022.2.26

WordPressで人気のテーマ「AFFINGER6」。

さまざまな機能が使用できるAFFINGER6ですが、基本的にはブロッグエディタ「Gutenberg(グーテンベルク)」を使用することが前提のテーマとなっています。

Classic Editorで使用すると少し不便に感じます。その理由はCSSのクラス名をいちいち調べないといけない点です。

そこでAFFINGER6でよく使うCSSのクラス名をまとめてみました。

よく使う項目

ページ区切り

 html
<!--nextpage-->

マイ細マーカーA

 html
<span class="st-mymarker-s">サンプルテキスト</span>

マイ細マーカーB

 html
<span class="st-mymarker-s-b">サンプルテキスト</span>

テーブルスクロール(SP)

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

要素の左寄せ・中央寄せ・右寄せ

pタグのみ反映されます。

特にこだわりがない、またはdivなどの要素で使用するのであれば style="text-align: center;" などでデザインしても問題ありません。

要素の左寄せ

 html
<p class="has-text-align-left">要素</p>

<p style="text-align: left;">要素</p>

要素の中央寄せ

 html
<p class="has-text-align-center">要素</p>

<p style="text-align: center;">要素</p>

要素の右寄せ

 html
<p class="has-text-align-right">要素</p>

<p style="text-align: right;">要素</p>

段落

カスタム

 html
<p class="is-style-st-paragraph-pen">サンプルテキスト</p>

リンク

 html
<p class="is-style-st-paragraph-link">サンプルテキスト</p>

チェック

 html
<p class="is-style-st-paragraph-check">サンプルテキスト</p>

注意

 html
<p class="is-style-st-paragraph-attention">サンプルテキスト</p>

注意(グレー)

 html
<p class="is-style-st-paragraph-attention-gray">サンプルテキスト</p>

マル

 html
<p class="is-style-st-paragraph-circle-o">サンプルテキスト</p>

バツ

 html
<p class="is-style-st-paragraph-times">サンプルテキスト</p>

付箋

 html
<p class="is-style-st-paragraph-memo">サンプルテキスト</p>

囲みドット

 html
<p class="is-style-st-paragraph-dotline">サンプルテキスト</p>

リスト

ドット下線

 html
<ul class="is-style-st-border">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

マル

 html
<ul class="is-style-st-circle">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

マル+ドット下線

 html
<ul class="is-style-st-circle-border">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

チェックボックス(※箇条書き)

 html
<ul class="is-style-st-square-checkbox-no-border">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

チェックボックス(※箇条書き)+ドット下線

 html
<ul class="is-style-st-square-checkbox">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

チェックリスト

 html
<ul class="is-style-st-maruck">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

ナンバリング

 html
<ul class="is-style-st-maruno">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

ナンバリング四角

 html
<ul class="is-style-st-no">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

ナンバリング四角+ドット下線

 html
<ul class="is-style-st-no-border">
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

引用

プレーン

 html
<blockquote class="wp-block-quote is-style-plain">
	<p>サンプルテキスト</p>
	<cite>サンプルテキスト</cite>
</blockquote>

大サイズ

 html
<blockquote class="wp-block-quote is-style-large">
	<p>サンプルテキスト</p>
	<cite>サンプルテキスト</cite>
</blockquote>

ライン

 html
<blockquote class="wp-block-quote is-style-st-quote-line">
	<p>サンプルテキスト</p>
	<cite>サンプルテキスト</cite>
</blockquote>

テーブル

ストライプ

 html
<figure class="wp-block-table is-style-stripes">
	<table>
		<thead>
			<tr>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

スクロール(SP)

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

中央寄せ

 html
<figure class="wp-block-table is-style-st-centertable">
	<table>
		<thead>
			<tr>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

ラインのみ

 html
<figure class="wp-block-table is-style-st-table-line">
	<table>
		<thead>
			<tr>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
				<th>サンプルテキスト</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
			<tr>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
				<td>サンプルテキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

ボタン

塗りつぶし

 html
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link">サンプルテキスト</a></div>

輪郭

 html
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">サンプルテキスト</a></div>

画像

デフォルト

 html
<figure class="wp-block-image size-large is-style-default">
	<img src="" alt=""/>
	<figcaption>サンプルテキスト</figcaption>
</figure>

角丸

 html
<figure class="wp-block-image size-large is-style-rounded">
	<img src="" alt=""/>
	<figcaption>サンプルテキスト</figcaption>
</figure>

シャドウ

 html
<figure class="wp-block-image size-large is-style-st-photo-shadow">
	<img src="" alt=""/>
	<figcaption>サンプルテキスト</figcaption>
</figure>

枠線

 html
<figure class="wp-block-image size-large is-style-st-photoline">
	<img src="" alt=""/>
	<figcaption>サンプルテキスト</figcaption>
</figure>

ポラロイド風

 html
<figure class="wp-block-image size-large is-style-st-photohu">
	<img src="" alt=""/>
	<figcaption>サンプルテキスト</figcaption>
</figure>

ページ区切り

 html
<!--nextpage-->

マイ細マーカー

マイ細マーカーA

 html
<span class="st-mymarker-s">サンプルテキスト</span>

マイ細マーカーB

 html
<span class="st-mymarker-s-b">サンプルテキスト</span>
  • この記事を書いた人

COSSY

40代の会社員。妻と小学生と保育園児の2人の子どもの4人で生活しています。 副業としてブログなどで月10~15万円程を稼ぎ、これまでに累計400万円を稼いできました。 ブログでの副業の仕方、節約の仕方などを発信しています。

-AFFINGER, BLOG