メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
文章の一部の色や太さなどを変更することはできますか?
文章の一部の色や太さなどを変更することはできますか?

リッチテキスト内で一部のテキストスタイルを変更する方法を解説します。通常のテキストと箇条書きでの設定方法の違いについても説明しています。

Saika avatar
対応者:Saika
1か月以上前に更新

テキストのスタイル一部変更について

エディタ画面左にある追加パネル内 リッチテキスト を使うと、太字・斜線・下線などの特殊スタイルをかけることができます。この特殊スタイルを応用して、リッチテキスト内の一部テキストの色や太さを変更できます。

通常のテキストボックスには特殊スタイルの設定はできないため、一部の色を変更したい場合には、リッチテキストをご利用ください。

テキストの一部スタイルを変更する手順

1. 変更箇所の選択

色を変更したい箇所を選択します。

スクリーンショット:変更箇所のテキストを選択する様子。

2. 特殊スタイルの適用

選択したまま、一時的にBold(太字)のスタイルを適用します。リッチテキスト外を一度クリックすると変更が反映されます。

※例としてBold(太字)を設定していますが、他のスタイルでも設定できます。

スクリーンショット:特殊スタイルを適用する様子。

3. 色や太さの変更

Bold(太字)を適用した部分を選択し、色や太さを変更します。テキストの太さ・サイズ・フォントの変更も可能です。

スクリーンショット:色や太さを変更する様子。

※ Bold(太字)を適用すると、自動で太さが変わるので必要に応じて調整します。

スクリーンショット:Bold 設定で適用された不要な変更を解除する様子。

箇条書きリストの一部スタイルを変更する手順

リッチテキスト内で設定できる <ul> または <ol> の <li> テキストへは、上記の方法で一部のテキストスタイルを変更することは現在の仕様上できません。

<li> 内テキストのスタイルを一部変更したい場合は、次の手順で行います。

1. スタイル設定用のテキストを追加

一度 <p> を追加し、そのテキストを太字にしてスタイルを変更します。

スクリーンショット;スタイル設定用のテキストを追加する様子。

スクリーンショット;特殊スタイルを設定し、テキストの色を変更する様子。

2. 特殊スタイルの設定

次に、<li> 内テキストを太字にすると、スタイル変更が適用されます。

スタイル設定用に追加した <p> は設定完了後に削除しても問題はありません。

スクリーンショット;箇条書きテキストの一部を太字に変更する様子。

注意スタイル変更を個別の記事に限定したい場合

別々のCMS記事モデルを使用するか、別の特殊スタイルを使う必要があります。同じCMS記事モデル内の別の記事で、同じ特殊スタイル(太字、斜体、下線など)を使用している箇所があると、一つの記事で特殊スタイルに対して行った変更(色、サイズなど)が、他の記事の同じ特殊スタイルにも自動的に反映されるためです。

こちらの回答で解決しましたか?