人生を楽しくする「まちゅブログ」はここをクリック

【超簡単】WordPressで赤色マーカーを今すぐ使う方法。コピペOK!

スポンサーリンク

みんなの声
ブログの文章に赤色のマーカーってどうやって引いてるの?

 

今回はこのような疑問を解決します。

 

>>本記事でわかること
  • 赤色マーカーを誰でもすぐ使える方法
  • コピペで使えるCSSカスタマイズ方法

 

まちゅ
どうもまちゅです!

 

まちゅ
この記事では今すぐに赤色マーカーを使う方法を紹介します!

 

記事を書いていたら、

「今すぐ赤色のマーカーを使いたい!でもどうすれば!」

っていう場面ありますよね!

 

こんな感じの赤色マーカー使いたくないですか?

 

テーマやエディタによっては初めから機能として備わっている場合もありますが、無い場合もあります。

 

まちゅ
僕はSTORK19でClassic Editorを利用しているのですがマーカーが見当たらず。(ブロックエディターならマーカーあるけど。)

 

ということで今回は、

CSS設定で今すぐ赤色マーカーを使える方法を紹介していきますね!

 

スポンサーリンク

CSS設定で今すぐ赤色マーカーを使う

今すぐ赤マーカーを使う方法
まちゅ
「CSSって何か難しそう」っていう人でも大丈夫!

 

コピペですぐに終わります!

 

今から解説する手順通りに設定してみましょう!

 

追加CSSでカスタマイズ設定

各テーマの追加CSSあるいはスタイルシートにて、

 

赤色マーカーを使うためのカスタマイズをします。

 

まちゅ
僕が使用しているSTORK19の場合こんな感じ↓

 

追加css

 

.marker {background: linear-gradient(transparent 70%, #ff9393 70%);font-weight: bold; }

 

はいこれをコピーしてCSSカスタマイズすれば設定完了です!

 

ざっくりこのCSSの内容を説明すると、

  • 赤色のマーカーを使用
  • 30%の太さのマーカーを使用
  • 背景に透明性を持たせる
  • 文字は太字にする

みたいな感じで理解してもらえればOK。

 

マーカーを引く文字は太字が良いと個人的に思っているので、太字CSSも含めてあります。

 

太字はstrongタグでもできますが、多用すると良くないのでCSSで設定するのがオススメ。

 

太字に関する記事はコチラ

strongタグの使い過ぎはペナルティ?SEOのためにもCSSで!

 

spanタグで実際に使ってみる

では実際に使ってみましょう!

 

投稿編集画面のテキストモードにて、

 

spanタグ

 

上記画像のように入力。

 

開始タグ<span class=”marker”>
終了タグ</span>

 

spanタグで文字を装飾して赤色マーカーを使用できます。

 

こんな感じになるよ!↓

 

ですが手入力で毎回タグを打ち込むのはかなり面倒なので、プラグインのAdd Ouicktagをインストールしておくとかなり楽ちん!

 

Add Quicktagをインストールしている人は、このように登録しておくとすぐにタグを呼び出せます!

add quicktag登録

 

 

以上、赤色マーカーを今すぐ使う方法の解説でした!

 

赤色マーカーを使うための解説はこれで終わりですが、

  • マーカーの色を変えたい
  • マーカーの太さを変えたい

という方は続きもどうぞ!

 

マーカーの色を変える

マーカーの色を変える

マーカーの色を変える場合は、

 

上記で説明した赤色マーカーの「#」の続きを変えるだけです!

 

.marker {background: linear-gradient(transparent 70%, #ff9393 70%);font-weight: bold; }

 

このCSSの「ff9393」の部分を各色の数値にしてあげればOK!

 

では僕のおすすめの色をいくつか紹介しますね!

おすすめの色

水色マーカー「7fbfff」

オレンジマーカー「ffdc00」

ピンクマーカー「ff9ece」

 

緑や紫など色なんて無限大にありますが、記事に使うなら上記のような色が合うのではないかと思いピックアップしてみました!

 

ぜひ参考にしてみてください!

 

マーカーの太さを変える

マーカーの太さを変える

マーカーの太さもカスタマイズできるので、自分好みの太さを探してみましょう!

 

.marker {background: linear-gradient(transparent 70%, #ff9393 70%);font-weight: bold; }

 

上記CSSの「%」を変更すればOK!

 

重要
注意してほしいのが、上記CSSの%部分に70%と書いてありますが、

これは30%の太さのマーカーになるよ!っていう設定になります。

 

すなわち100%の太さのマーカーにするなら、CSSの%部分は0%と入力すればOKってことですね。

 

100%の太さのマーカーはこんな感じ。

 

まちゅ
さすがに見にくさを感じますね。

 

やはりオススメは30%くらいかと!

 

ちなみにCSSの%部分が2つあると思いますが、基本的には2つとも同じ数値で入力しましょう!

 

まとめ:マーカーは簡単に今すぐ使える

まとめ

お疲れさまでした!

 

今回の方法を使えば、いろんな色や太さのマーカーを自由に使えます。

 

自分のサイトカラーに合ったマーカーを作ってみるのもひとつの手ですよ!

 

 

それでは今回はこれにて!

 

バイチャ(^^)/

 

スポンサーリンク