ブロックエディタのツールバーのハイライトについて

  • 解決済 ryoizm

    (@ryoizm)


    1年、 12ヶ月前

    ブロックのツールバーの「ハイライト」を使用すると、編集画面ではきちんと選択した文字に色が付くのですが、記事のプレビューや、公開した状態で記事を確認すると、ハイライトを使用した文字が色だけでなく、”斜体”と”太字”になってしまいます。

    症状が出たしたのは、WordPressのバージョンが6.1.1に更新された後あたりからです。

    ちなみに、クラシックエディタで色指定をすると”斜体”と”太字”の症状は現れないので、現在はクラシックエディタで記事を作っていますが、私が使っている色がデフォルトにないので、毎回ブロックを改めるたびにカラーコードを入力する必要もあり、編集の都合上、煩わしさもあり作業効率が落ちるので、やはりブロックエディタを使用したいのです。

    プラグインで「Advanced Rich Text Tools for Gutenberg」を使用して指定部分の文字に色を付けていたこともあるんですが、こちらもWordPressのバージョン更新後にサイドバーのパレットが表示されなくなり(どうやらサイドバーの後ろに隠れてしまってるようです)、こちらも使用できなくなりました。

    今回の症状の確認用に、ブロックエディタ「テスト」というページを冒頭に公開しておきました。
    紫に色指定した部分に”斜体”と”太字”の症状が現れています。

    これはバグでしょうか？
    もし解決方法があるようでしたら教えていただきたいです。
    よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • KOJI

    (@ko-chan)

    1年、 12ヶ月前

    ryoizm さん、こんにちは。

    > ブロックのツールバーの「ハイライト」を使用すると、編集画面ではきちんと選択した文字に色が付くのですが、記事のプレビューや、公開した状態で記事を確認すると、ハイライトを使用した文字が色だけでなく、”斜体”と”太字”になってしまいます。

    記載されている WordPress サイトの HTML のソースを確認すると

    > <mark style=”background-color:rgba(0, 0, 0, 0)” class=”has-inline-color has-vivid-purple-color”>テスト画面</mark>

    となっています。

    関係の有りそうな CSS を探してみるとテーマのスタイルファイル /wp-content/themes/mag_tcd036/style.css?ver=3.5 の 92 行目

    > mark { font-style:italic; font-weight:bold; }

    が ”斜体”と”太字”の原因ですね。

    WordPress のアップデートの際に　テーマもアップグレードされたりしていないでしょうか。

    対応としては、テーマの CSS を改変するか 追加CSSで、mark の CSS を上書きする等の方法で解決できるのではないでしょうか。

    • この返信は1年、 12ヶ月前にKOJIが編集しました。
    トピック投稿者 ryoizm

    (@ryoizm)

    1年、 12ヶ月前

    KOJIさん、こんにちは。
    お返事ありがとうございます。

    前後は忘れましたが、確かにWordPressのアップデートと同時期にテーマのバージョンアップもした記憶があります。
    となると、テーマの方に原因があったのでしょうか。

    今出先なので、帰宅したら早速テーマのスタイルファイルを確認して、”CSSの改変”または”追加して上書き”というのをやってみようと思います。
    が、いかんせん、知識が未熟でこのあたりのいじり方がわからないので、もしよろしければどのように改変、または追加&上書きをしたらいいか、ご教示いただけると幸いです。(失敗が怖い…)

    お手数をお掛けしますがよろしくお願い致しますm(_ _)m

    KOJI

    (@ko-chan)

    1年、 12ヶ月前

    ryoizm さん

    テーマによって異なるかもしれませんが、管理画面で「外観」 > 「カスタマイズ」画面を開くと　左の一番下に「追加CSS」が無いでしょうか。

    適用されている CSS の

    > mark { font-style:italic; font-weight:bold; }

    を解除するのであれば、「追加CSS」の入力欄に

    mark { font-style: initial; font-weight: initial; }

    の CSS を入力して保存して、CSSを上書きするとどうなるでしょうか。

    トピック投稿者 ryoizm

    (@ryoizm)

    1年、 12ヶ月前

    KOJIさん

    すごい！！
    教えていただいたmarkのCSSを「追加CSS」の入力欄に入力したら一発で太字と斜体が解除されました！
    直ってとても嬉しいです！
    素人レベルの反応と知識ですみません(^-^;)

    この度は的確で親切なアドバイスをいただき、本当にありがとうございました！(*^▽^*)
    とても助かりました♪

    • この返信は1年、 12ヶ月前にryoizmが編集しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ブロックエディタのツールバーのハイライトについて」には新たに返信することはできません。