アフィンガーの使い方

【クラス名を公開】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>

よく読まれている記事

チェック
【初心者向け】WordPressブログの始め方

WordPressはブログやホームページを誰でも簡単に管理・運営するために開発されたサイト構築サービスです。 インターネット上にあるWebサイトのおよそ4割はWordPressを利用して作られています ...


チェック
【初心者必見】アフィリエイトで稼ぐブログの仕組み

アフィリエイトに興味を持つ人が増えていますが、実際にどのように始めたらいいのか、どのような仕組みで稼げるようになるのか分からなくないですか？ そこで今回は、アフィリエイトで稼ぐために必要な知識を学べる ...
チェック
【初心者向け】ロリポップでWordPressを始める方法をご紹介

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...
チェック
【初心者向け】エックスサーバーでWordPressを始める方法をご紹介［WordPressクイックスタート編］

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...
チェック
【初心者向け】ブログで副業を始める方法

長引く不況で給料が上がらない、定収入をどうにかしたい、お小遣いを増やしたいなど副業を始める理由はいろいろとあると思います。 でも実際にどうやってブログで稼ぐのか分からない人が大半です。 今回はブログを ...

  • この記事を書いた人

マネフリ

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

-アフィンガーの使い方