今までSimplicityをいくつかのWebサイトで使ってきているんですが、Simplicityの編集画面にはスタイルが多く追加されているということに気がついていませんでした。そのスタイルを使うとで簡単にラインマーカーを使ったり枠で文字を囲んだり、その他のいろいろな文字装飾をすることができます。
多くのスタイルでどんな文字装飾ができるか？などについて調べてみました。
Simplicityを導入すると、編集画面でできることが増えていた
たとえば今のデフォルトテーマである Twentysixteen を有効化した状態で編集画面を見ると、
ビジュアルエディタ
テキストエディタ
このような状態です。これが普通の編集画面の状態です。
テーマを
Simplicityにすると、
ビジュアルエディタ
スタイル という部品が増えています。
▼ をクリックすると、編集で使えるたくさんのスタイルが表示されます。
テキストエディタ
テキストエディタにも赤枠で囲った部分のボタンが追加されていました。
Simplicityのインストールについては、
[ryus_blogcard url=”https://usortblog.com//beginner-simplicity-setup/”]
をご参照ください。
Simplicityで追加されたスタイル部品を使ってみる
Simplicityで追加されたスタイル部品を使うとどうなるかを試してみます。
ダミーテキストジェネレータ（http://rooms.webcrow.jp/text.htm）で10行ほどの文章を作りました。
通常のエディタで文字を装飾してみました。
こんな感じです。太字にしたりブロッククォートで囲ったりしました。
Simplicityで編集するときには、ビジュアルエディタなら
編集したい文字を選んで、スタイルからスタイルを選びます。
テキストエディタなら
編集したい文字を選んで、ボタンをクリックします。
Simplicityで追加されたスタイルをすべて使ってみました。
こんな感じに、同じ文章ですがなにかを説明するときにこれだけ装飾があると圧倒的に見やすくポイントや説明などがわかりやすくなったと思います(^^)/。
使ったスタイルが分かるようにボタンを載せてみました。
どうでしょう？たとえば キーボード などは画面説明でボタンをクリックしてもらうときに使うととってもわかりやすくなると思います。
スタイルを追加したり削除したりする方法
Simplicityで追加されたスタイルはどこで指定しているのかな？と調べてみると、
simplicity2\lib\qtags.php
というところで追加をしていました。
テキストエディタ用には、
<script>
QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
QTags.addButton('qt-red','赤字','<span class="red">','</span>');
QTags.addButton('qt-bold-red','太い赤字','<span class="bold-red">','</span>');
（中略）
QTags.addButton('qt-sp-danger','danger','<div class="sp-danger">','</div>');
QTags.addButton('qt-bold','','<div class="bold">','</div>');
</script>
こんな感じで、ビジュアルエディタ用には
$style_formats = array( array( 'title' => '太字', 'inline' => 'span', 'classes' => 'bold' ), array( 'title' => '赤字', 'inline' => 'span', 'classes' => 'red' ), array( 'title' => '太い赤字', 'inline' => 'span', 'classes' => 'bold-red' ), （中略） ), array( 'title' => 'dangerボックス', 'block' => 'div', 'classes' => 'sp-danger' ), );
こんな感じでスタイルが追加されています。このスタイルに合わせたCSSも指定されているはずですね。
スタイルの追加をするには
こちらに詳しく書いてありました。
スタイルの削除をする方法は
Simplicity2の文字装飾ボタンを個別で非表示にしたい
こちらにありました。
どちらもやってみたいなぁと思いましたので今度また試してみたいと思います(^^)/
コメント