【コピペ】蛍光ペン風マーカーのCSSを追加しようぜ！

WordPressのJINというテーマを使っているのですが、蛍光ペン風のマーカーが２種類しかないんですよね。

ピンクのマーカーと
ブルーのマーカー

もっとたくさん欲しくない？

今回は
蛍光ペンっぽいマーカーのCSSを追加していこうと思います。
↑こういうやつ！

蛍光マーカーってどうなってるの？

私がこれを書いているときに使っているWordpressテーマの「JIN」では、蛍光マーカーは

<span class="marker"></span>

となっているだけなので、そこまで依存性は高くないのです。

で・す・が・！

赤いマーカー
と
青いマーカー
の２種類しかありません。

ラインマーカーと言ったらオレンジじゃないですか！？

緑色のマーカーとかほしくないですか！？

学生のころ、ラインマーカーを引いて勉強した気になってた男。そう、私だ！！

さっそくコピペしていこう。

ワードプレスを使っている場合

[外観] >[カスタマイズ]>[追加CSS]
と進んでください。

このオレンジ蛍光ペンと同じで良ければ、下のやつをそのままコピペしよう！

/* マーカーデザイン */
.marker-orange{
background:linear-gradient(transparent 80%, #ffadad 80%);
font-weight:bold; 
}

コピペが終わったら、[公開]を押すのを忘れずに！

新しい記事を投稿するときに「テキストエディタ」で

<span class="marker-orange">この間に文字を入れる</span>

と書けば、マーカーがされます。

解説！

１行目

/* マーカーデザイン */

これは、ここにマーカーのデザインがあるよー！と書いてあるだけ。
自分が発見しやすいようにつけてあるものなので、別にいらない人は省略してもOKです。

２行目

.marker-orange{

これは簡単に言えばマーカーの名前です。
記事を書くときに使います。

<span class="marker-orange">この間に文字を入れる</span>

名前はなんでもOK「marker01」とか[underline5]などにしてもOKです。

３行目

background:linear-gradient(transparent 80%, #ffadad 80%);

マーカーの太さと色を決めます。
80%となっているところが２つありますね。

数字が大きければ大きいほど、マーカーは細くなります。

この数字は２つとも同じ数字にしましょう。

私のオススメは「60～80」あたり！
いろいろと試してみましょう！

「#ffadad」と謎の文字列が並んでいますね。
これが色です。

こちらのサイトで好きな色を決めましょう！

4行目

font-weight:bold; 

文字を太字にするという設定です。
マーカーの上の文字を太字にしたくない人は、削除しましょう。

5行目

}

このデザインの設定はここまで。という印。消さないでくださいね。

オススメのマーカーCSS

CSSは「追加CSS」にコピーして
HTMLは記事を書くときに「テキストエディタ」で使用してください。

イエローマーカー

こんな感じのマーカーですよ。

CSS

/* イエローマーカー */
.marker-yellow{
background:linear-gradient(transparent 80%, #fff799 80%);
font-weight:bold; 
}

HTML

<span class="marker-yellow"></span>

ピンクマーカー

こんな感じのマーカーですよ。

CSS

/* ピンクマーカー */
.marker-pink{
background:linear-gradient(transparent 80%, #ffcedb 80%);
font-weight:bold; 
}

HTML

<span class="marker-pink"></span>

ブルーマーカー

こんな感じのマーカーですよ。

CSS

/* ブルーマーカー */
.marker-blue{
background:linear-gradient(transparent 80%, #a9eaf2 80%);
font-weight:bold; 
}

HTML

<span class="marker-blue"></span>

グリーンマーカー

こんな感じのマーカーですよ。

CSS

/* グリーンマーカー */
.marker-green{
background:linear-gradient(transparent 80%, #b2ffb2 80%);
font-weight:bold; 
}

HTML

<span class="marker-green"></span>

マーカーは３色くらいまでかな。

１つの記事にマーカーは３色までかなーと個人的には思っています。

ノートとかもさ、めちゃカラフルに色分けして作ってるヤツいませんでした？

目がチカチカして見づらいし、
どこが大事なのかさっぱりわからん！！て感じの。

ブログも同じことになると思うんだよね（笑）

私もマーカー引くときは気をつけようと思います！

では！