当サイトには広告が含まれております

Simplicityで記事を書くとき、多くのスタイルを使って文字装飾が簡単にできるんです

この記事は最終更新日から5年経過しています。内容が古い可能性があります。

今まで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で追加されたスタイルをすべて使ってみました。

img_57d9edce00f78

こんな感じに、同じ文章ですがなにかを説明するときにこれだけ装飾があると圧倒的に見やすくポイントや説明などがわかりやすくなったと思います(^^)/。

使ったスタイルが分かるようにボタンを載せてみました。

どうでしょう?たとえば キーボード などは画面説明でボタンをクリックしてもらうときに使うととってもわかりやすくなると思います。

スタイルを追加したり削除したりする方法

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の文字装飾ボタンを個別で非表示にしたい

こちらにありました。

どちらもやってみたいなぁと思いましたので今度また試してみたいと思います(^^)/

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る