WordPressでフォントをマーカーのような文字にする方法とは？

Web集客の専門家、俵谷龍佑（@tawarayaryusuke）です。

他の人のブログを見ていると勉強になります。

ブログのデザインもさることながら、フォントの種類も変えることができるので、面白いです。

色々なブログを見ていると、蛍光マーカーで引いたような文字が…

こんなやつです。

これ意外に目立つから良いですよね。

普通に赤文字や太文字よりインパクトあるので。

background-colorタグを使用する
カラーコードを修正すれば、色も変えられる

background-colorタグを使用する

この蛍光マーカーで引いたような文字を表現する方法は、もっと複雑と思いきや意外と簡単なコードでした。

<strong><span style="background-color: #ffff00;">サンプル</span></strong>

1	<strong><spanstyle="background-color: #ffff00;">サンプル</span></strong>

▼こんな感じ▼
サンプル

background-colorは直訳すると「背景色」という意味です。

そのあとの#～始まるコードが色を表すカラーコードになるので、ここを変えると背景色を変えることができます。

カラーコードを覚えている変態はそういないので、普通は下記のようなサイトで検索してコピペして使います。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

カラーコードを修正すれば、色も変えられる

上のサイトを参考にしながら、#～始まるコードをコピペ。

例えば、ちょっと濃い目のピンクならこんな感じ。

 <strong><span style="background-color: #ff1493;">サンプル</span></strong>

1	<strong><spanstyle="background-color: #ff1493;">サンプル</span></strong>

こんな感じ

サンプル

これ以外にも打消し線、下線など様々な組み合わせが可能です。

ぜひ試してみてください！

下線

<span style="text-decoration: underline;"><strong><span style="background-color: #ff1493;">サンプル</span></strong></span>

1	<spanstyle="text-decoration: underline;"><strong><spanstyle="background-color: #ff1493;">サンプル</span></strong></span>

こんな感じ

サンプル

打消し線

<del><strong><span style="background-color: #ff1493;">サンプル</span></strong></del>

1	<del><strong><spanstyle="background-color: #ff1493;">サンプル</span></strong></del>

こんな感じ

~~サンプル~~

こちらも合わせて読まれています

Amazonアソシエイトの報酬で得たギフト券の使い方について解説する【ブロガー必見】

Macで画面の色のカラーコード調べるなら「Digital Color Meter」が便利

短時間でアイデアを生み出すには、常に「情報の波」に埋もれること

この記事を書いた人
最新の記事

俵谷龍佑

京都が好きすぎて移住｜25歳で独立｜未経験でライターに｜顧客課題を共に考える｜採用・地方創生とBtoB向けSEOが専門領域｜気合いではなく仕組みで解決｜トラベルライター｜ADHDグレーゾーン｜自分らしく働ける人を増やす｜大衆食堂と町中華｜新しい働き方LAB 京都コミュマネ｜ハフコミュ 2期｜信楽たぬき｜