Simplicity2 HTMLエディター文章装飾スタイルのクイックタグ活用法

カテゴリー別今日の人気ランキング
スポンサーリンク

Simplicity の文章装飾スタイル

WordPressで投稿記事を作成する時に、HTMLエディターに記事内でよく使う文字装飾用のタグをボタン(クイックタグ)として登録しておけば、文章を目立たせたい、強調表示したい時などに便利で、毎回タグを入力する必要もなく作業の効率もあがります。

Simplicity では、CSSフォルダ内の extension.css に、文字装飾に使える CSS の拡張クラスがいくつか用意されています。

 参照 extension.css(文字化けする時はページ表示後文字コードを「UTF-8」に変更)

知ってると便利!Simplicity内蔵の文章修飾用のスタイル
Simplicity内蔵の文章修飾用のスタイル Simplicity の CSSフォルダ内の extension.css に書かれている文...
Simplicity が Simplicity2 にバージョンアップされた際、この CSS 拡張クラスが、WordPress HTMLエディターのクイックタグとして標準装備されました。

HTMLエディターに新しく追加されたクイックタグは、下の赤枠のものです。
Simplicity2のHTMLエディター
 注記 枠:Simplicity2標準装備のタグ、枠:自作関数で追加したタグ、それ以外:WordPressデフォルトのタグ

Simplicity2 標準装備クイックタグの活用法

文字装飾

タグ名 表示 スタイル
太字 これはサンプルです。 class=”bold”
赤字 これはサンプルです。 class=”red”
太い赤字 これはサンプルです。 class=”bold-red”
赤アンダーライン これはサンプルです。 class=”red-under”
黄色マーカー これはサンプルです。 class=”marker”
黄色アンダーラインマーカー これはサンプルです。 class=”marker-under”
打ち消し線 これはサンプルです。 class=”strike”

バッジ/キーボード

【 バッジ 】バッジ(class=”ref”)

参照情報として、外部のサイトを紹介するような場合、リンクの頭にバッジを付けてあげると判りやすいと思います。

バッジ化したい「参照」「引用」などの文字をマウスでドラッグしてからボタンを押すと、その名前のバッジが作成されます。
ドラッグしないでボタンを押すと「バッジ」になりますので、「<span class=”ref”>バッジ</span>」の「バッジ」を「参照」「引用」「出典」などに書き換えて使用します。

  • 参照 参照情報バッジ (例)参照 こちらのページも参照してください。
  • 引用 引用元バッジ
  • 出典 出典元バッジ
  • 重要 重要バッジ
  • 脚注 脚注バッジ
  • Pickup Pickupバッジ
  • サイト サイトリンクバッジ

【 キーボード 】キーボード(class=”keyboard-key”)

パソコンの操作を説明するときや、画面説明でボタンをクリックしてもらうときなどには、キーボード風に表示してあげると親切です。

キーボード化したい文字をマウスでドラッグしてからボタンを押すと、その名前のキーボードが作成されます。ドラッグしないでボタンを押すと「キーボード」になりますので、「<span class=”keyboard-key”>キーボード</span>」の「キーボード」を「Ctrl」「C」「V」などに書き換えて使用します。

  • コピーをするには  Ctrl + C を押します。
    貼り付けをするには Ctrl + V を押します。
  • 注記(ボタン風にも使えます)
  • こちらのページ も参照してください。(ボタンにリンクも付加できます)

補足情報表示

【 補足説明(i) 】情報やお知らせ文を書きます(class=”information”)
【 補足説明(?) 】疑問・質問?に対する説明文を書きます(class=”question”)
【 補足説明(!) 】注意文を書きます(class=”alert”)

背景色

【 primary 】これはサンプルです。(class=”sp-primary”)
【 success 】これはサンプルです。(class=”sp-success”)
【 info 】これはサンプルです。(class=”sp-info”)
【 warning 】これはサンプルです。(class=”sp-warning”)
【 danger 】これはサンプルです。(class=”sp-danger”)

新たなクイックタグを追加したいときは

Simplicity2 の qtags.php に追加する方法

クイックタグは、Simplicity2 →「libフォルダ」→「qtags.php」の add_quicktags_to_text_editor 関数で定義されています。

qtags.php の関数に新たにクイックタグを追加する方法は、

  1. 下の add_quicktags_to_text_editor 関数をコピーして、子テーマの functions.php に貼り付けます。
  2. 追加したいボタンを QTags.addButton 文で記述し関数内に追加していきます。

コードの記述形式は、追加したいボタン1つに対して次の1行を記述します。

  • ID:ボタンの識別記号です。ダブらないようにIDをつけます。
  • ボタンのラベル:ボタンに表示される名前です。
  • 開始タグ:開始タグを記述します。定型文を作る時はここに記述します。改行は「\n」です。
  • 終了タグ:終了タグを記述します。終了タグのないタグは「’ ‘」にします。

クイックタグ関数を自作し追加する方法

クイックタグ関数を自分で作成し、子テーマの function.php に追加していく方法です。

参考 詳細はこちらを参考にしてください。

子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
クイックタグとは WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)とし...

qtags.php に追加する方法は、元の関数をコピーしてその関数に追加していくのに対し、この方法は、追加タグ部のみを作成すればいいので、判り易いかもしれません。

ボタンの表示順は、「WordPressデフォルトのタグ」「自作関数で追加したタグ」「Simplicity2標準装備のタグ」の順に並びます。

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする