SWELLで使えるクラシックエディターの機能と挿入されるタグ一覧

SWELLでクラシックエディターは使えるのか?

SWELLで使えるクラシックエディターの機能と挿入されるタグをまとめておきます。

目次

クラシックエディターを使う前に

SWELLはクラシックエディターでも使えますが、ブロックエディターでしか使えないSWELL専用ブロックも多いので、SWELLの機能を最大限に活かしたいのであれば、ブロックエディターを使うべきです。

また、ブロックエディターの方が選択できるスタイルが多かったり、カスタマイズも豊富だったりします。

SWELLブロック

ただ、普段投稿する記事はクラシックエディターで編集する。デザインに拘りたいトップページやブログパーツ等はブロックエディターで編集する。といった記事ごとにエディターを切り替える使い方もできるので、SWELLは普段クラシックエディターを使っている方にもおすすめできるテーマです。

クラシックエディターに切り替える

プラグインClassic Editorを追加&有効化すれば、クラシックエディターに切り替えることができます。

この際、初期設定では投稿設定の「ユーザーにエディターの切り替えを許可」が「いいえ」になっているので、ブロックエディターと併用したい方は「はい」に変更しておくことをおすすめします。

投稿設定

あわせて読みたい
Classic Editorの設定と使い方:クラシックエディターの復元 プラグインClassic Editorの設定と使い方をまとめておきます。 このプラグインを使うと、クラシックエディター(ビジュアルエディター&テキストエディター)を復元する...

クラシックエディターでSWELL専用のタグを使いたい時は、ビジュアルエディターの「ツールバー切り替え」ボタンをクリックして、拡張されたツールバーの「スタイル」と「特殊パーツ」から挿入することができます。

クラシックエディターで使えるタグ

テキストエディターで使いたい時は、プラグインAddQuicktagを追加してタグを登録して下さい。

あわせて読みたい
AddQuicktagの設定と使い方:エディターにタグボタンを追加 プラグインAddQuicktagの設定と使い方をまとめておきます。 このプラグインを使うと、エディターに任意のタグを追加することができます。よく使う見出しタグや文字の装...

スタイル

クラシックエディターで使えるスタイルと挿入されるタグ一覧です。

テキスト装飾

スクロールできます
挿入されるタグ
マーカー:オレンジ <span class="mark_orange"></span>
マーカー:イエロー <span class="mark_yellow"></span>
マーカー:グリーン <span class="mark_green"></span>
マーカー:ブルー <span class="mark_blue"></span>
注釈 <small></small>
インラインコード <code></code>
フォントサイズ:極小 <span class="u-fz-xs"></span>
フォントサイズ:小 <span class="u-fz-s"></span>
フォントサイズ:大 <span class="u-fz-l"></span>
フォントサイズ:特大 <span class="u-fz-xl"></span>

画像スタイル

追加されるclass属性
swell
枠あり
class="border"
swell
影あり
class="shadow"
swell
フォトフレーム
class="photo_frame"
swell
少し小さく表示
class="size_s"
swell
小さく表示
class="size_xs"

シンプルボックス

スクロールできます
挿入されるタグ

線枠:グレー

<div class="is-style-border_sg"></div>

点線枠:グレー

<div class="is-style-border_dg"></div>

線枠:メインカラー

<div class="is-style-border_sm"></div>

点線枠:メインカラー

<div class="is-style-border_dm"></div>

背景:メインカラー

<div class="is-style-bg_main"></div>

背景:薄メインカラー

<div class="is-style-bg_main_thin"></div>

背景:グレー

<div class="is-style-bg_gray"></div>

効果付きボックス

スクロールできます
挿入されるタグ

ストライプ

<div class="is-style-bg_stripe"></div>

方眼

<div class="is-style-bg_grid"></div>

角に折り目

<div class="is-style-crease"></div>

スティッチ

<div class="is-style-stitch"></div>

かぎ括弧

<div class="is-style-kakko_box"></div>

かぎ括弧(大)

<div class="is-style-big_kakko_box"></div>

窪み

<div class="is-style-dent_box"></div>

浮き出し

<div class="is-style-emboss_box"></div>

左に縦線

<p class="is-style-border_left"></p>

付箋

<p class="is-style-sticky_box"></p>

吹き出し

<p class="is-style-balloon_box"></p>

吹き出し2

<p class="is-style-balloon_box2"></p>

アイコンボックス(小)

スクロールできます
挿入されるタグ

グッド

<p class="is-style-icon_good"></p>

バッド

<p class="is-style-icon_bad"></p>

インフォ

<p class="is-style-icon_info"></p>

アナウンス

<p class="is-style-icon_announce"></p>

ペン

<p class="is-style-icon_pen"></p>

<p class="is-style-icon_book"></p>

アイコンボックス(大)

スクロールできます
挿入されるタグ

ポイント

<div class="is-style-big_icon_point"></div>

チェック

<div class="is-style-big_icon_good"></div>

バツ印

<div class="is-style-big_icon_bad"></div>

はてな

<div class="is-style-big_icon_hatena"></div>

アラート

<div class="is-style-big_icon_caution"></div>

メモ

<div class="is-style-big_icon_memo"></div>

リスト装飾

スクロールできます
追加されるクラス属性
  • チェック
  • チェック
  • チェック
class="is-style-check_list"
  • 注釈
  • 注釈
  • 注釈
class="is-style-note_list"
  • マル
  • マル
  • マル
class="is-style-good_list"
  • バツ
  • バツ
  • バツ
class="is-style-bad_list"
  1. 丸文字
  2. 丸文字
  3. 丸文字
class="is-style-num_circle"
  • 【ul&ol】下線を付ける
  • 【ul&ol】下線を付ける
  • 【ul&ol】下線を付ける
class="border_bottom"

ボタン装飾

スクロールできます
挿入されるタグ
<div class="is-style-btn_normal red_"></div>
<div class="is-style-btn_normal blue_"></div>
<div class="is-style-btn_normal green_"></div>
<div class="is-style-btn_solid red_"></div>
<div class="is-style-btn_solid blue_"></div>
<div class="is-style-btn_solid green_"></div>
<div class="is-style-btn_shiny red_"></div>
<div class="is-style-btn_shiny blue_"></div>
<div class="is-style-btn_shiny green_"></div>

レイアウト

スクロールできます
挿入されるタグ
中央寄せボックス <div class="swell-styleBox u-ta-c"></div>
SPのみ表示 <div class="swell-styleBox sp_only"></div>
PCのみ表示 <div class="swell-styleBox pc_only"></div>

特殊パーツ

クラシックエディターで使える特殊パーツと挿入されるタグ一覧です。

関連記事

表示させたい記事のidを入力して、関連記事を表示させることができます。

あわせて読みたい
WordPressの始め方&使い方 WordPressの始め方と使い方をまとめています。 現在発生しているWordPressのバグについてはこちらの記事を参考にして下さい。 WordPressの始め方 おすすめのレンタルサ...

フルワイドコンテンツ

画面横幅いっぱいに広がるエリアを作成できます。

ここにコンテンツを入力

ふきだし

登録したふきだしのidを入力して、アイコン付きのふきだしを表示させることができます。

Scofield
ここにテキストを入力

ノーマルテーブル

項目 ここにテキストを入力
項目 ここにテキストを入力

ヘッド付きテーブル

行の説明 行の説明
項目 ここにテキストを入力
項目 ここにテキストを入力

シンプルテーブル

項目 ここにテキストを入力
項目 ここにテキストを入力

シンプルテーブル(ヘッド付き)

行の説明 行の説明
項目 ここにテキストを入力
項目 ここにテキストを入力

2カラム通常

カラム1

カラム2

2カラム 幅2:1

カラム1

カラム2

2カラム 幅1:2

カラム1

カラム2

スマホも2列を維持

カラム1

カラム2

スマホも2列 – 幅2:1

カラム1

カラム2

スマホも2列 – 幅1:2

カラム1

カラム2

3カラム通常

カラム1

カラム2

カラム3

3カラム 幅2:1:1

カラム1

カラム2

カラム3

3カラム 幅1:1:2

カラム1

カラム2

カラム3

スマホ最大2列 – 幅2:1:1

カラム1

カラム2

カラム3

スマホ最大2列 – 幅1:1:2

カラム1

カラム2

カラム3

キャプション大

キャプション

コンテンツ

キャプション小

キャプション

コンテンツ

キャプション枠上

キャプション

コンテンツ

キャプション枠上2

キャプション

コンテンツ

最後に

クラシックエディターに慣れている。普段投稿する記事に凝った装飾は必要ない。等、これからもクラシックエディターを使いたい方は、記事ごとにエディターを切り替える方法を検討してみて下さい。

これからWordPressを始める方は、クラシックエディターの使い方を覚える必要はありません。ブロックエディターの使い方を覚えて、ブロックエディターを使いこなせるようになって下さい。

スポンサーリンク
スポンサーリンク

スポンサーリンク

関連コンテンツ

コメント

コメントする

目次