Ver1.8 Released!

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

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

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

文字を太字や斜体にする

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


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

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

文字のスタイル

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

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

SANGOを使ってみよう 【WordPress】ビジュアルエディタでドロップダウン「スタイル」が表示されない時の対処法

文字のサイズを変える

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

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

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種類の見出しも簡単に挿入することができます。詳しくはこちらの記事をご参照ください。

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

36 COMMENTS

みどりせんせー 2019/04/07

いつもSANGOを便利に使わせていただいております。

テキスト装飾ページとして、記事の内容とは離れているのですが質問です。
SANGOで改行幅を狭くしたかったのですが、どのようなコードを打てばいいのでしょうか?
よろしくお願いいたします。

回答を見る
kaz 2019/03/17

はじめまして。
蛍光ペンのアンダーラインの色についてですが、最初から用意されている青、黄、緑、赤、以外の色は指定可能でしょうか?
よろしくお願いします。

は、用意されている色以外の色は可能でしょうか?

回答を見る
ぽん太 2019/03/03

記事中の本文?普通の文字部分(見出し以外)だけ見出しよりも左右1字くらい内側に下げた状態で表示にしたいのですが、cssのどの辺を変更すれば出来ますでしょうか。
よろしくお願い致します。

回答を見る
青ちゃん 2018/05/04

いつもお世話になっております。

Add Quicktagというプラグインを使い、アンダーラインと文字の拡大を一緒にやりたいと思っています。

そういう場合、
こちらは蛍光ペン(青)、

これが文字大きめ
をどう組み合わせればいいのでしょうか??

回答を見る
みみみ 2018/03/21

こんにちは。標準で表示される、リンクのアンダーラインを消したいです。
a {text-decoration: none;}をCSSの部分に書いても消えないのですが、他に方法はありますでしょうか?

回答を見る
さるみ 2018/03/19

はじめまして!
SANGO購入して早速色々といじっているのですが、
Xエックスサーバーのウェブフォントプラグインでフォント変えてみても
本文のフォントが変わりません。
何か対処法あれば教えてほしいです!
よろしくお願いします。

回答を見る
CM 2018/03/07

いつも迅速な回答ありがとうございます。
WP Event Manager というプラグインを試しているのですが、プラグインを有効にするとウィジェットのテキストのフォントサイズが小さく表示されます。
これはプラグイン側の問題なのでしょうか?SANGOのCSSが最後に読み込まれれば問題無いと思うのですが。

回答を見る
sango好きです 2018/02/23

文字を太字にしたいんですけどstrongがイヤだったのでAdd Quicktagを使って自分で追加しました。
でも反映されません。

外観→テーマの編集→SANGO Child: スタイルシート (style.css)に
/*太字用*/
.bold {
font-weight: bold;
}
と貼って

Add Quicktagには
ボタンのラベル→太字
開始タグ→
終了タグ→
チェックはビジュアルエディター、post、pageに入っています。

テキストを見ると太字ってなってるんですが太字にならずに困っています。お手すきのときに教えてください。

回答を見る
匿名希望 2017/12/26

SANGO、いつも快適に使わせていただいております。

蛍光ペンを多用している(更に多用したい)のですが、
[スタイル]→[文字のスタイル]→[蛍光ペン〇色]と、メニューが深く、選ぶのに多少のストレスになります。

蛍光ペンをボタン一発で行うような設定方法はありますでしょうか?

回答を見る

コメントを残す

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