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

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

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

目次

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

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

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

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

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

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

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

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

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

スタイル

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

ブロックエディターとの比較や詳細はSWELL設定マニュアルの「エディター機能の使い方」で確認して下さい。

テキスト装飾

スクロールできます
挿入されるタグ
マーカー:オレンジ <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・SWELL・プラグイン等   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

キャプション

コンテンツ

ショートコード

エディターには表示されませんが、専用のショートコードで呼び出すことができる機能です。

詳細は、SWELLで使えるショートコード一覧 | WordPressテーマ SWELLで確認して下さい。

記事内広告

SWELL設定の「記事内広告[ad]」に登録した広告を呼び出すことができます。

広告タグに登録した広告を呼び出すこともできます。

目次

任意の場所に目次を表示させることができます。

5段階評価スター

5段階評価をスターアイコンで表示できます。

初期設定は5段階ですが、任意の段階に変更することもできます。

デバイス別改行コード

PCでのみ改行されます。

スマホでのみ改行されます。

ログイン制限コンテンツ

ログイン中ユーザーにだけ表示されます。

非ログインユーザーにだけ表示されます。

ブログパーツ

登録したブログパーツを呼び出すことができます。

カスタムバナー

任意の画像と文章でバナーを作成できます。

最後に

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

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

コメント

コメントする

目次