Ver1.5 Released !

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

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

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

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

31 Comments

匿名希望

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

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

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

返信する
サルワカくん

なるほど。
Add Quicktagというプラグインを使うのが良いと思います。
そこに
<span class="keiko_blue">〜</span>
などと登録し(緑ならclass名はkeiko_green、黄色ならkeiko_yellow)、順番を0にします。
(ビジュアルエディタにチェックを入れるのを忘れずに)
これでAddQuicktagのドロップダウンの一番上に表示されるので、少し楽になるのではないかと思います。

返信する
匿名希望

>サルワカくんさん

ご丁寧な対応ありがとうございます。

希望通りのことが実現できました。
ありがとうございました。

ずうずうしいお願いをさせていただけるなら、

蛍光ペン(赤)

が追加されたら嬉しいなぁ~と思っております。

次回アップデートの際などにご検討くださいませ。

返信する
匿名希望

>サルワカくんさん

アップデートみました!

まさかの(?)希望通りの対応、誠にありがとうございます!

これで、強調の幅が広がって、更に使いやすくなりました!

SANGO買って本当に良かったです!

返信する
サルワカくん

いえ、こちらこそ有意義なご要望ありがとうございました。
今後ともよろしくお願い致します。

返信する
sango好きです

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

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

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

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

返信する
サルワカくん

CSSは問題なさそうです。
開始タグは<span class="bold">
終了タグは</span>
になっていますか?
キャッシュの削除も行われていますよね?

返信する
sango好きです

キャッシュの削除をしても反映されたなかったんですがもしかしたらと思ってプレビューで見てみると反映されていました。
お騒がせして申し訳ありません。

ただワードプレスの投稿画面上は変わらないのでこれはそういう仕様なのでしょうか?
他に赤太字と黄マーカー太字も作ってるんですが投稿画面では赤と黄マーカーだけ表示されプレビューでみると赤太字、黄マーカー太字になってます。

返信する
サルワカくん

あ、それはWordPressの仕様ですね。
WordPressではビジュアルエディタ用のCSSを別に用意する必要があります(通常のstyle.cssとは書き方も少し異なり、わかりづらいのですが…)。
SANGOでは、libraryのcssフォルダーの中にeditor-style.cssというファイルが入っており、そちらがビジュアルエディタ用のCSSファイルとなっております。

返信する
sango好きです

丁寧な返信ありがとうございます。
試してみます!ありがとうございました!

サンゴ始めました

ビジュアルエディタの段落の横に「スタイル」がないため、見出しを変えることができません。原因がわかりません。
何か操作が必要であれば教えてほしいです。
よろしくお願いします。

返信する
CM

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

返信する
CM

プラグインが、Bootstrapを適用するかしないかというオプションを持っていて、デフォルト設定がオンになっていたことが原因と判明しました。オフにして問題解決。
お騒がせしました。

返信する
さるみ

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

返信する
さるみ

何度もすみません。
今、ウェブフォント設定クラス本文タグ→.hentry
となっているのですが、もしかしたらこれが原因ですかね??
もし何かわかれば教えてほしいです!
よろしくお願いいたします><

返信する
サルワカくん

指定クラスを「body」か.「entry-content」にしてみると良いかと思います。

返信する
さるみ

ありがとうございました!
「body」でいけました!
本当に素敵なテンプレートですね。
すみません、もう一つ質問があるのですが、
今fontawesome使おうとしてるのですが、うまく表示されません。。。
タグ内にコードを貼り付けたら記事下のshareボタンの画像が消えてしまいました。。
どうしたらfontawesomeが使えますか??

返信する
サルワカくん

うまくいったようで良かったです!
なるほど、おそらくよくある質問の下の方にある「Font Awesomeのアイコンが表示されない」を見てみると解決するのではないかと思います。ご確認よろしくお願いします。

返信する
サルワカくん

それでも表示されない場合は、原因を確認しますのでサイトURLを教えて頂けると幸いです。

返信する
さるみ

4.7のアイコンから選んだら正常に表示されました。
本当にありがとうございました!!
これからも、愛用させていただきます!!

さるみ

何度もすみません。
先日エックスサーバーのwebフォントが使えないと質問したさるみと申します。
あれからPC上とアンドロイドスマホでは正常にフォントが表示されていたのですが、今iphoneから確認したところ、全然違うフォント(明朝体)で表示されていました・・・
フォント設定クラス本文タグはbodyに設定しているのですが、iphoneだけ適用されないというのは何が原因でしょうか??
もし解決方法があれば教えていただきたいです。
よろしくお願いいたします。

返信する
サルワカくん

うーん、そのあたりはテーマとは関係のない部分なのと経験もないのとで、ちょっと分からないですね・・・。
申し訳ないです。エックスサーバーにお問い合わせ頂くのが良いかと思います。

返信する
さるみ

了解しました。
お手数おかけしてすみませんでした。
本当にありがとうございました。
エックスサーバーに問い合わせてみます^^

サルワカくん

いえ、お力になれず申し訳ないです・・・
よろしくおねがいします!

みみみ

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

返信する
みみみ

こんにちは。CSSに入れたのですが、反映されません。子テーマだと、反映しないのでしょうか?

返信する
青ちゃん

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

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

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

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

返信する
サルワカくん
<span class="keiko_blue big">〜</span>

というようにクラスを複数指定すればOKです。

返信する

コメントを残す

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