Ver1.3.1をリリースしました(11/22)

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

テキストの文字色と色の変更

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

文字を太字や斜体にする

文字を太字にしたいときには、ビジュアルエディタの上側にあるBをクリックします。斜体にしたいときにはIをクリックします。これはSANGOに関わらず共通の装飾ですね。


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

SANGOのオリジナルスタイルを使うためにはスタイル のドロップダウンを使用します。①装飾したいテキストをドラッグで選んだうえで、②「スタイル」をクリックしましょう。

文字のスタイル

表示されるメニュー内の「文字のスタイル」にカーソルを当てると、装飾の選択肢がずらっと表示されます。この中から使いたいものを選ぶことで、簡単に文字にスタイルを適用することができます。

文字のサイズを変える

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

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

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

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

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

文字色を変える

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

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

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

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

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

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

こちらは蛍光ペン(青)こちらは蛍光ペン(黄)こちらは蛍光ペン(緑)です。

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

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

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

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

 

MEMO

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です