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

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

55 COMMENTS

花田 2019/12/29

SANGOのカスタムブロック内のアコーディオンをカスタマイズしたい

お世話になっております。 先日テーマを購入し、楽しくカスタマイズさせて頂いております。 記事作成において簡単に装飾できるのが大変気に入っておりますが、その中で以下の項目をカスタマイズしたいと感じています。 ・SANGOのカスタムブロック内のアコーディオン→アコーディオンの幅を文字に合わせて短くしたい。文字の大きさを変えたい 調べてはみたのですが見つからずご質問させて頂きました。 (もし重複していた…

回答を見る
堀江 2019/12/26

スマホから見た時に文字の中央揃えをしたい

Twitterにコメントをさせていただいた者です。 バージョンを更新してからか、文字の配列が変わってしまいました。 URLから見ていただいて 太文字のサブタイトルやMENUなど太文字の見出しを中央揃えにしたいのですがiPadや編集画面からは中央揃えになっています。 しかしながらiPhoneから見ると左揃えのままです。以前まではiPhoneから見ても中央揃えになっていたのですが、今日更新して以降変わ…

回答を見る
α PsA 2019/10/18

HTMLで文字を赤にする編集をすると黄色のマーカーがつく

いつもお世話になっております。先日の内容を早速機能として反映していただきありがとうございます。 本題に入りますと私はGutenbergで作業をしているのですが、9月4日付のアップデートをしたところ、文字を赤にするHTMLコードを入力すると黄色の蛍光マーカーも同時に出てくるようになりました。 アップデートで実装された、sangoハイライトから黄色の蛍光マーカーを消すようにすると今度はマーカーも消えて…

回答を見る
野田秋星 2019/07/05

Gutenbergを使用した文字の色の変え方について

はじめまして、sangoを楽しく使わせていただいております。 僕は以前はcocoonを使っており、文字の色変えなどはカーソルで文の範囲を指定し、その後変えたい色のボタンを押して変更していました。 しかし、sangoでは文字の色を変えるときは毎回HTMLコードを入力する必要があるのでしょうか? それともcocoonのように簡単に色を変える方法があるのでしょうか? 僕は現在Gutenbergを使用して…

回答を見る
ねね 2019/05/24

リンクの装飾を、TOPページ(固定ページ)のみ変えたい

SANGOを使って1年ほどたちます。 最近TOPページをリニューアルしようと思い、色々といじっている中で質問が多くなり申し訳ございません。 固定ページをTOPページに指定しているのですが、TOPページのあるリンクのみ、通常のリンク装飾とは違う装飾に変更したいです。 現状の装飾リンク・・・リンクすると、緑色の文字に下線 希望の装飾リンク(TOPページのみこうしたい) ・・・「リンクをしても文字色は変…

回答を見る
みどりせんせー 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というプラグインを入れるとデザインが崩れる

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

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

文字を太字にしたいんですけどstrongがイヤだったのでAdd Quicktagを使って自分で追加しました。 でも反映されません。 外観→テーマエディター→SANGO Child: スタイルシート (style.css)に /*太字用*/ .bold { font-weight: bold; } と貼って Add Quicktagには ボタンのラベル→太字 開始タグ→ 終了タグ→ チェックはビジュ…

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

よく使う装飾を簡単に呼び出せるようにしたい

SANGO、いつも快適に使わせていただいております。 蛍光ペンを多用している(更に多用したい)のですが、 [スタイル]→[文字のスタイル]→[蛍光ペン〇色]と、メニューが深く、選ぶのに多少のストレスになります。 蛍光ペンをボタン一発で行うような設定方法はありますでしょうか?

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。