テキストの装飾とサイズ・色の変更方法

SANGOでは、HTMLとCSSの知識が無くても、ビジュアルエディタから簡単に文字を装飾することができます。ここでは、その方法をまとめておきます。

文字を太字や斜体にする

SANGOのオリジナル装飾を使う

スタイルが表示されない場合は下記リンク先をご覧ください。

2019年3月27日 【WordPress】ビジュアルエディタでドロップダウン「スタイル」が表示されない時の対処法

文字のサイズを変える

スタイルのドロップダウンの中に文字小さめ、文字大きめ、文字特大という項目があります。それぞれを適用すると以下のような表示になります。

これが文字小さめです。これが文字大きめです。これが文字特大です。

HTMLで見ると、以下のようになります。

<span class="small">これが文字小さめ</span>です。<span class="big">これが文字大きめ</span>です。これが<span class="sobig">文字特大</span>です

spanタグで囲いつつ、SANGO独自のスタイル用クラス名が用意されているというわけです。なお、太字や斜体、色設定（これから説明します）などと組み合わせて使うこともできます（赤の太字の特大文字にしたり…などですね）。

文字色を変える

赤、青、緑、オレンジ、シルバーの5色を選択肢に用意しておきました。スタイル のドロップダウンにある文字（赤）などを選ぶことで簡単に適用できます。HTMLは以下のようになります。クラス名はシンプルにblueやredなどとしています。

<span class="red">赤</span>、<span class="blue">青</span>、<span class="green">緑</span>、<span class="orange">オレンジ</span>、<span class="silver">シルバー</span>

ちなみに以下のようにリストの文字に対しても適用することができます。

• 赤の文字に
• 青の文字に
• 緑の文字に
• オレンジの文字に
• シルバーの文字に

蛍光ペン風のアンダーラインを引く

蛍光ペン風のアンダーラインは3色用意しておきました。

こちらは蛍光ペン（青）、こちらは蛍光ペン（黄）、こちらは蛍光ペン（緑）です。

この装飾のHTMLは以下のようになります。

<span class="keiko_blue">こちらは蛍光ペン（青）</span>、<span class="keiko_yellow">こちらは蛍光ペン（黄）</span>、<span class="keiko_green">こちらは蛍光ペン（緑）</span>です。

背景をうっすら灰色で塗る

さきほどからちょこちょこと登場している文字の背景を灰色にする表現はスタイルのドロップダウンの「背景をうっすら灰色に」を選ぶことで適用できます。

MEMO

「クラス名って一体何？」という方はこちらの記事が参考になるかもしれません。

初心者向けHTML入門：書き方の基本とタグの使い方

ここまで紹介してきた装飾スタイルに加え、約40種類の見出しも簡単に挿入することができます。詳しくはこちらの記事をご参照ください。

見出しの挿入方法と種類一覧