メインコンテンツにスキップ

ガイド内のテキストの色や書式(太字・斜体・下線)を変更したい

概要

PLAINERのポップアップガイドやバルーンガイドでは、ガイドテキスト欄にHTMLタグを直接記載することで、文字の色や書式(太字・斜体・下線)を変更したり、文字を枠線や背景色で囲んで強調することができます。

⚠️ この設定には基礎的なHTML/CSSの知識が必要です。

文字の色を変更する

  1. 色を変更したいガイドを選択します

  2. ガイドテキスト欄に、<span style="color:#FF0000;">テキスト</span> と記載します

  3. “テキスト” の箇所を任意の文字列に変更します

  4. color:#FF0000; 内のカラーコードを変更すると、文字色が変わります

文字を太字・斜体・下線にする

ガイドテキスト欄に、以下のHTMLタグで装飾したい文字列を囲んでください。

  • 太字<b>テキスト</b>

  • 斜体<i>テキスト</i>

  • 下線<u>テキスト</u>

色と書式を組み合わせる

タグを入れ子にすることで、色と書式を同時に指定できます。

<b><span style="color:#FF0000;">赤い太字のテキスト</span></b>

文字を枠線や背景色で囲む

ガイドテキスト欄では、<span>style 属性で枠線(border)や背景色(background-color)を指定することで、文字を枠で囲んで強調することができます。

オレンジ色の枠線で囲む場合

<span style="border:2px solid #FFA500; padding:2px 6px; border-radius:4px;">テキスト</span>

オレンジ色の背景で囲む場合

<span style="background-color:#FFA500; color:#FFFFFF; padding:2px 6px; border-radius:4px;">テキスト</span>

各指定の意味は以下のとおりです。

  • border:2px solid #FFA500;:枠線の太さ・種類・色

  • background-color:#FFA500;:背景色

  • padding:2px 6px;:文字と枠の間の余白

  • border-radius:4px;:角の丸み(不要な場合は削除できます)

注意点

カラーコードはHTMLのカラーコード(例:#FF0000 = 赤、#FFA500 = オレンジ)で指定してください

  • タグの記述に誤りがあると、文字が正しく表示されない場合があります。装飾したい文字列を開始タグと終了タグで正しく囲んでいるかご確認ください

  • ガイドテキストの枠線・背景色は、あくまでガイド本文テキストを囲む装飾です。撮影した画面上の特定の要素(ボタンやリンクなど)をオレンジ色の枠で囲んで強調したい場合は、ガイド作成時の要素のハイライトをご利用ください

関連ヘルプ記事

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