WordPressで
文字色と下線・アンダーラインの色を変える

 

 

wordpressでアンダーラインを引くとこんな感じ
文字色とアンダーラインが
同じ色になる。

 

強調したいときに使うのに同じ色ではあまり意味が無いので
変える方法が無いかと調べた。


まずは今使っているTinyMCE Advancedという編集用のプラグインで
どうにか出来ないかと思ったが、どうやら無理そうだった。

 

他の方法を調べるとfunctions.phpやstyle.cssにコードを書き込む方法や
プラグインを追加して変える方法が出て
きた。

 

 functions.phpは以前何かを追加した時、サイトとwordpressのダッシュボードに
アクセス出来なくなった事があり、あまり触りたくない。

 

プラグインは入れすぎると重くなったり、他のプラグインと干渉したりする
可能性があるのであまり追加したくない。

 

そしてもっと手軽で簡単な方法が無いのかとさらに調べると、ぴったり自分の
やりたい事は見つからなかったが調べた情報を組み合わせればなんとか出来そう
だったのでやってみた。

 

そして文字列をテキストに書き込んでアンダーラインの色だけを変える
方法がわかった。

※この方法が正しいのかは不明なので使用する場合は自己責任で。

 

スポンサーリンク

 

アンダーラインの色を変える方法

 

まず書き込む文字列は(1列にしたいので文字が小さい)

<span style=”border-bottom: solid; border-width: 2px; border-color: #FF0000;”>アンダーラインを入れる文字</span>

 

大きく書くと

<span style=”border-bottom: solid; border-width: 2px; border-color: #FF0000;”>アンダーラインを入れる文字</span>

 

  • 2pxは線の太さで、数字を変えれば太さが変わる。
  • #FF0000はカラーコードの赤を表している。コードは調べれば出てくるので
    ここを変えれば好きな色に出来る。基本色なら英語でredと書いても変えられる。
  • 「アンダーラインを入れる文字」の所に任意の文字を入れる。

 

これをテキストの表示したい場所に書き込む

すると

アンダーラインを入れる文字   

と表示される。
これで問題は解決できたと思う。


wordpressはきちんと勉強すれば、いろいろ出来るようになりそうだが
時間も掛かりそうなので、まずは自分のほしい機能の事を覚えていき。
徐々に幅を広げて行きたい。

 

スポンサーリンク