ブログ関連

WordPressで文字にマーカーを一瞬で引く方法【プラグイン不要・コピペOK】

2020年2月22日

WordPressで文字にマーカーを一瞬で引く方法【プラグイン不要・コピペOK】

 

こまりくん
ワードプレスで文字にマーカーを引きたいなあ...

ぎもんさん
プラグインを使わずにやりたいんだけど、方法はないかな?

 

この記事ではこんな悩みを解消します。

 

ブログで文字を強調したいところに「マーカーを引いたような装飾」をしているのをよく見かけませんか?

 

基本手段であり、たくさんのブロガーさんがやってますよね!

でもワードプレスにはデフォルトではいい感じにマーカーを引ける方法はありません。

 

そこで今回はWordPressで文字にマーカーを一瞬で引く方法を詳しく解説します!!

 

コピペするだけで一瞬でできる方法なので、必見ですよ!

 

今回ご紹介する方法はプラグイン不要なので、サイトが重くなったり影響がでることは一切ないです!
また、マーカーの色も自分の好きな色に設定できるのでぜひ参考にしてください♪

 

記事の内容

・マーカーの色を自由に変更する方法
・マーカーを使う際の注意点

 

記事の信頼性

・wordPressのデフォルトテーマや有料テーマでも実装できるか確認済みです。

 

それでは早速記事を見ていきましょう!

 

WordPressプラグインを導入しないでマーカーを実装する方法

WordPressプラグインを導入しないでマーカーを実装する方法

 

プラグインを導入しないでマーカーを実装したい方法はズバリ!
下記のコードをコピーして使いましょう!

 

太いマーカー

<span style="background:#fff9c4">自由テキスト</span>

 

細いマーカー

<span style="background:linear-gradient(transparent 70%,#fff9c4 0%)">自由テキスト</span>

 

ぎもんさん
え、これだけ?
そう、これだけ!使いたいところにコピペするだけでいいんです!
ともき

 

実際に使用するとこんな感じになります。

 

太いマーカー

細いマーカー

 

プラグインも使用しないで済むので、サイトや記事のページの読み込みが遅くなる不安もない安全な方法!
ぜひお試しください。

 

それでは続きで「赤色」や「青色」など自由にマーカーの色を変える方法をご紹介します。

 

マーカーの色を自由に変更する方法

マーカーの色を自由に変更する方法

 

マーカーの色を変更する方法は、先ほどのコードの「#fff9c4」の場所を変えるだけです!

 

#fff9c4というのはカラーコードと呼ばれる色を指定するコードです。

カラーコードは原色大事典HUE/360などのサイトから好きな色のコードを知ることができますよ!

 

カラーコードがわかったら、色々試して自分の納得のいくマーカーにしてみましょう!

 

マーカーを使う際の注意点

マーカーを使う際の注意点

 

ワードプレスでマーカーの実装は無事できましたか?

 

無事できたら、早速使う前に注意点をしっかり理解してから使うことおおすすめします。

 

注意するべき点は次の3つ。

注意点

  • マーカーを引きすぎない
  • 見やすさを考えて色を選ぶ
  • いろんな色のマーカーを多用しすぎない

 

こちらについて少し詳しく解説します。

 

注意点その1マーカーを引きすぎない

 

マーカーは強調したい文字を目立たせるものです。

 

使用したい所にピンポイントに利用してこそ最大限に効果が発揮されるので、たくさんの箇所に使用するには控えましょう。

 

ちなみにたくさん使った場合の悪い例はこちらです↓

マーカーを使うメリット文字の強調ができることです。
これにより自分が伝えたいことが相手に伝わりやすく、読みやすいブログにすることができます。
私もよくマーカーを使っています。とってもおすすめなので、ぜひ皆さんも使ってみてください。

 

適度にマーカーを使った場合↓

 

マーカーを使うメリットは文字の強調ができることです。
これにより自分が伝えたいことが相手に伝わりやすく、読みやすいブログにすることができます。
私もよくマーカーを使っています。とってもおすすめなので、ぜひ皆さんも使って見てください。

 

マーカーは伝えたい部分だけピンポイントに!
ここ大事です!

 

注意点その2見やすさを考えて色を選ぶ

 

マーカーの色を選ぶときは、文字が見やすい色を選びましょう。

例えば、同じ水色で見ても、色の濃さだけで見やすさが大きく変わります。

 

水色のマーカーを使用した時の文字の見やすさはこちら
水色のマーカーを使用した時の文字の見やすさはこちら

 

文字の読みやすさを損なわないような、なるべく色の濃すぎないものを選んで見ましょう!!

注意点その3いろんな色のマーカーを多用しすぎない

 

マーカーの色は、多くても記事内で2色くらいにしておきましょう。

 

なぜかというと、いろんな色のマーカーを使用すると目がチカチカして読みにくくなるからです。

 

ポイント

ブログの記事を読みやすくするためにマーカーを使うのに、そのマーカーのせいで読みにくくなるなんて本末転倒!
色の使いすぎには注意しましょう。

 

記事を読みやすくするのはマーカーだけじゃない!いろんな方法を試してみよう

記事を読みやすくするのはマーカーだけじゃない!いろんな方法を試してみよう

 

読みやすい記事、最後まで読んでもらえるような記事にする方法は、マーカーを引く以外にも無数に方法があります。

 

例えば、

  • リード文を丁寧に作る
  • マーカー以外の装飾にこだわる
  • 見出し下にアイキャッチ画像を入れる
  • アイキャッチ画像を目を引くものにする

など挙げればキリがないです。

 

当ブログ内では、ブログを最後まで読んでもらうために工夫すべき秘策6点という記事もありますので、マーカーの設定が無事できたら、ぜひ記事を参考にして「最後まで読んでもらえるような読みやすいブログ」にしていくことをおすすめします。

 

当記事が参考になれば幸いです。

関連記事ブログを最後まで読んでもらうために工夫すべき秘策6点【改善前と改善後の比較データあり】

関連記事ブログのリード文について詳しく解説【閲覧時間を伸ばすとっておきのテンプレートつき】

 

-ブログ関連
-