【HTMLエディター】テキストリンクの文字色を変更したい

【HTMLエディター】テキストリンクの文字色を変更したい

エディターを使用していると、テキストリンクの文字色や下線部の色が青くなり、変更できなくなってしまうことがあります。
この記事ではどのようにすれば回避できるのかについて解説していきます。

リンクパーツを使用している場合


上図のような「リンク」パーツを使用している場合には、下記から色を変更することができます。
  1. 要素を選択 > 上部リボンパーツの🖌(編集)アイコン > テキスト設定 > Font color

テキストの一部のみをリンクにしている場合


上図のように「テキスト」パーツを使用している場合には、正しい順番でリンク設定を行う必要があります。
※既にリンク化してしまった場合には、一度テキストに戻してから下記手順にて行うのが良いと思います。
  1. 対象箇所を選択して「U」を押し、下線部を付ける。
  2. 文字に色を付ける。
  3. リンクを設定する。
  4. 完成！


何故この順番でないといけないのか

何故「下線→文字色→リンク」の順番である必要があるかというと、HTMLエディターが外側にCSSの掛かったclassを掛けるからです。
  1. <p>一部だけがリンクの場合</p>
  2. <p>一部だけが<u>リンク</u>の場合</p>
  3. <p>一部だけが<span style="color:#16a085;"><u>リンク</u></span>の場合</p>
  4. <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エディター】商品idで指定して商品パーツを呼び出したい

      アクションリンクでは、下記の5種類のタグを使用することで、任意の商品を指定して商品パーツを呼び出すことができます。 %%CodeItemABlock{商品id}%% %%CodeItemBBlock{商品id}%% %%CodeItemCBlock{商品id}%% %%CodeItemDBlock{商品id}%% %%CodeItemEBlock{商品id}%% 記述例：%%CodeItemABlock12345678%%、%%CodeItemCBlockabc-12345a%% ...

    • 【HTMLエディター】画像にリンクを追加したい・リンク付きの画像を挿入したい

      下記手順にて画像にリンクを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[リンク(非テキスト)]を画像横にドラッグする。 上側リボンにある[歯車]を押す。 右側リボンにある遷移先URLを設定する。(必要ならタイトルやターゲット属性も設定する) 画像をリンクエリアへドラッグする。 画像の少し外側にマウスを当てて「リンク」」と表示されればOK。

    • 【HTMLエディター】ボタンを挿入・編集したい

      ボタンの追加 A. ボタンの挿入 下記手順でボタンを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[ボタン]を挿入したい場所にドラッグする。 ダブルクリックしてテキストを書き換える。 [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。) B. ボタンのリンク先設定 上部リボンにある歯車ボタンを押す。 遷移先URLを設定する。 (タイトルは「null(空のまま)」、ターゲット属性は「New ...

    • 【HTMLエディター】画像・ボタンのサイズ・位置を変更したい

      画像・ボタンのサイズ調整 下記手順で画像・ボタンのサイズ調整を行ってください。 編集したい画像・ボタンをクリックして選択する。 右上のリボンから「筆」が選ばれていることを確認する。 [属性 > Width・Height]からサイズを変更できます。(画像の場合は選択時にドラッグで変更することも可能です。) 画像・ボタンの位置調整 下記手順で画像・ボタンの位置調整を行ってください。 編集したい画像・ボタンをクリックして選択し、出てくる四角形のうち「↑」(1つ外側の要素へ)を選択する。 Table ...