【HTMLエディター】テキストリンクの文字色を変更したい
エディターを使用していると、テキストリンクの文字色や下線部の色が青くなり、変更できなくなってしまうことがあります。
この記事ではどのようにすれば回避できるのかについて解説していきます。
リンクパーツを使用している場合
上図のような「リンク」パーツを使用している場合には、下記から色を変更することができます。
- 要素を選択 > 上部リボンパーツの🖌(編集)アイコン > テキスト設定 > Font color
テキストの一部のみをリンクにしている場合
上図のように「テキスト」パーツを使用している場合には、正しい順番でリンク設定を行う必要があります。
※既にリンク化してしまった場合には、一度テキストに戻してから下記手順にて行うのが良いと思います。
- 対象箇所を選択して「U」を押し、下線部を付ける。
- 文字に色を付ける。
- リンクを設定する。
- 完成！
何故この順番でないといけないのか
何故「下線→文字色→リンク」の順番である必要があるかというと、HTMLエディターが外側にCSSの掛かったclassを掛けるからです。
- <p>一部だけがリンクの場合</p>
- <p>一部だけが<u>リンク</u>の場合</p>
- <p>一部だけが<span style="color:#16a085;"><u>リンク</u></span>の場合</p>
- <p>一部だけが<a href="http://example.com"><span style="color:#16a085;"><u>リンク</u></span></a>の場合</p>
というように、後に指定したものは外側に付け足されていきます。
CSSは内側のものが優先されるため、先にリンクを付けてしまうと、aタグに指定されている#0000ffの青色が内側に優先的に掛かってしまうため、後から色を変えようと思っても色が変わらないという訳です。
Related Articles
【HTMLエディター】メール内に動画を埋め込みたい
メール内に動画を埋め込みたいという要望は少なからずありますが、 メールソフト側のセキュリティ上の制限や仕様によって再生できない場合も多くあるため、動画の埋め込み自体を推奨されていません。 代替方法 1.サムネイルをリンク付き画像として動画視聴ページにリンクする こちらが一般的な方法です。 リンク付き画像を作成する方法はこちらの記事をご確認ください。 2. gif画像で代用する 3秒程度の短い動画であれば、gif画像で代々できる場合があります。 Videoタグで埋め込む ...【HTMLエディター】画像リンク/リンク画像/リンク付き画像を追加したい。
新手順(2025/10~) 2025年10月より「リンク付き画像」というパーツが利用できるようになりました。 下記手順にてリンク付き画像を設定してください。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[リンク付き画像]をエディタにドラッグする。 画像を選択する。 上側リボンにある[歯車]を押す。 右側リボンにある遷移先URLを設定する。(必要ならタイトルやターゲット属性も設定する) 旧手順 現在でもこちらの手順でも作業を行うことは可能です。 ...【HTMLエディター】リンクを押すと「接続が拒否されました」と表示されてしまい遷移できない。
原稿を作成してプレビューを確認中にリンクが正しく設定されているかを確認しようとすると、添付図のように「～で接続が拒否されました。」と表示されてしまうことがあります。 これは、外部サイトに遷移しないようになっているエディターのプレビュー機能のみで発生する仕様となっています。 実際にテストメールや本番のメールで確認してみると問題無く遷移できることが確認できます。 対応方法 対応する方法としては、URLを設定する歯車マークを押した際に出てくる、「ターゲット属性」について、「New ...【HTMLエディター】商品idで指定して商品パーツを呼び出したい
アクションリンクでは、下記の5種類のタグを使用することで、任意の商品を指定して商品パーツを呼び出すことができます。 %%CodeItemABlock{商品id}%% %%CodeItemBBlock{商品id}%% %%CodeItemCBlock{商品id}%% %%CodeItemDBlock{商品id}%% %%CodeItemEBlock{商品id}%% 記述例：%%CodeItemABlock12345678%%、%%CodeItemCBlockabc-12345a%% ...【HTMLエディター】画像にリンクを追加したい・リンク付きの画像を挿入したい
新手順(2025/10~) 2025年10月より「リンク付き画像」というパーツが利用できるようになりました。 下記手順にてリンク付き画像を設定してください。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[リンク付き画像]をエディタにドラッグする。 画像を選択する。 上側リボンにある[歯車]を押す。 右側リボンにある遷移先URLを設定する。(必要ならタイトルやターゲット属性も設定する) 旧手順 現在でもこちらの手順でも作業を行うことは可能です。 ...