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

この記事は約4分で読めます。

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

こちらにありました。

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。