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属性 | |
|---|---|
 枠あり |
class="border" |
影あり |
class="shadow" |
フォトフレーム |
class="photo_frame" |
少し小さく表示 |
class="size_s" |
小さく表示 |
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" |
|
class="is-style-num_circle" |
|
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を始める準備 このブログで使っているレンタルサーバーとドメイン取得サー...
|
1 |
[post_link id="00"] |
フルワイドコンテンツ
画面横幅いっぱいに広がるエリアを作成できます。
ここにコンテンツを入力
|
1 2 3 4 5 |
[full_wide_content bg="#f7f7f7"] ここにコンテンツを入力 [/full_wide_content] |
ふきだし
登録したふきだしのidを入力して、アイコン付きのふきだしを表示させることができます。
Scofieldここにテキストを入力
|
1 |
[ふきだし]ここにテキストを入力[/ふきだし] |
ノーマルテーブル
| 項目 | ここにテキストを入力 |
|---|---|
| 項目 | ここにテキストを入力 |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tbody> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> </tbody> </table> |
ヘッド付きテーブル
| 行の説明 | 行の説明 |
|---|---|
| 項目 | ここにテキストを入力 |
| 項目 | ここにテキストを入力 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <thead> <tr> <th>行の説明</th> <th>行の説明</th> </tr> </thead> <tbody> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> </tbody> </table> |
シンプルテーブル
| 項目 | ここにテキストを入力 |
|---|---|
| 項目 | ここにテキストを入力 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<figure class="is-style-simple"> <table> <tbody> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> </tbody> </table> </figure> |
シンプルテーブル（ヘッド付き）
| 行の説明 | 行の説明 |
|---|---|
| 項目 | ここにテキストを入力 |
| 項目 | ここにテキストを入力 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<figure class="is-style-simple"> <table> <thead> <tr> <th>行の説明</th> <th>行の説明</th> </tr> </thead> <tbody> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> <tr> <th>項目</th> <td>ここにテキストを入力</td> </tr> </tbody> </table> </figure> |
2カラム通常
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
2カラム 幅2：1
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns first_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
2カラム 幅1：2
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns last_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
スマホも2列を維持
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns sp_column2"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
スマホも2列 – 幅2：1
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns sp_column2 first_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
スマホも2列 – 幅1：2
カラム１
カラム２
|
1 2 3 4 5 6 7 8 |
<div class="wp-block-columns has-2-columns sp_column2 last_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> </div> |
3カラム通常
カラム１
カラム２
カラム３
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wp-block-columns has-3-columns"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> <div class="wp-block-column"> <p>カラム３</p> </div> </div> |
3カラム 幅2：1：1
カラム１
カラム２
カラム３
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wp-block-columns has-3-columns first_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> <div class="wp-block-column"> <p>カラム３</p> </div> </div> |
3カラム 幅1：1：2
カラム１
カラム２
カラム３
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wp-block-columns has-3-columns last_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> <div class="wp-block-column"> <p>カラム３</p> </div> </div> |
スマホ最大2列 – 幅2：1：1
カラム１
カラム２
カラム３
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wp-block-columns has-3-columns sp_column2 first_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> <div class="wp-block-column"> <p>カラム３</p> </div> </div> |
スマホ最大2列 – 幅1：1：2
カラム１
カラム２
カラム３
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="wp-block-columns has-3-columns sp_column2 last_big"> <div class="wp-block-column"> <p>カラム１</p> </div> <div class="wp-block-column"> <p>カラム２</p> </div> <div class="wp-block-column"> <p>カラム３</p> </div> </div> |
キャプション大
キャプション
コンテンツ
|
1 2 3 4 5 6 |
<div class="cap_box big_ttl"> <div class="cap_box_ttl">キャプション</div> <div class="cap_box_content"> <p>コンテンツ</p> </div> </div> |
キャプション小
キャプション
コンテンツ
|
1 2 3 4 5 6 |
<div class="cap_box is-style-small_ttl"> <div class="cap_box_ttl">キャプション</div> <div class="cap_box_content"> <p>コンテンツ</p> </div> </div> |
キャプション枠上
キャプション
コンテンツ
|
1 2 3 4 5 6 |
<div class="cap_box is-style-onborder_ttl"> <div class="cap_box_ttl">キャプション</div> <div class="cap_box_content"> <p>コンテンツ</p> </div> </div> |
キャプション枠上2
キャプション
コンテンツ
|
1 2 3 4 5 6 |
<div class="cap_box is-style-onborder_ttl2"> <div class="cap_box_ttl">キャプション</div> <div class="cap_box_content"> <p>コンテンツ</p> </div> </div> |
ショートコード
エディターには表示されませんが、専用のショートコードで呼び出すことができる機能です。
詳細は、SWELLで使えるショートコード一覧 | WordPressテーマ SWELLで確認して下さい。
記事内広告
SWELL設定の「記事内広告[ad]」に登録した広告を呼び出すことができます。
|
1 |
[ad] |
広告タグに登録した広告を呼び出すこともできます。
|
1 |
[ad_tag id="〇〇"] |
目次
任意の場所に目次を表示させることができます。
|
1 |
[swell_toc] |
5段階評価スター
5段階評価をスターアイコンで表示できます。
|
1 |
[review_stars 評価の点数] |
初期設定は5段階ですが、任意の段階に変更することもできます。
|
1 |
[review_stars 評価の点数/何段階か] |
デバイス別改行コード
PCでのみ改行されます。
|
1 |
[pcbr] |
スマホでのみ改行されます。
|
1 |
[spbr] |
ログイン制限コンテンツ
ログイン中ユーザーにだけ表示されます。
|
1 2 3 4 5 |
[only_login] ログイン中ユーザーにだけ表示したいコンテンツをここに [/only_login] |
非ログインユーザーにだけ表示されます。
|
1 2 3 4 5 |
[only_logout] 非ログインユーザーにだけ表示したいコンテンツをここに [/only_logout] |
ブログパーツ
登録したブログパーツを呼び出すことができます。
|
1 |
[blog_parts id="投稿ID or ブログパーツ名"] |
カスタムバナー
任意の画像と文章でバナーを作成できます。
|
1 |
[custom_banner title="タイトル" text="テキスト" link="リンク先" img_url="画像"] |
最後に
クラシックエディターに慣れている。普段投稿する記事に凝った装飾は必要ない。等、これからもクラシックエディターを使いたい方は、記事ごとにエディターを切り替える方法を検討してみて下さい。
これからWordPressを始める方は、クラシックエディターの使い方を覚える必要はありません。ブロックエディターの使い方を覚えて、ブロックエディターを使いこなせるようになって下さい。
コメント