Wordpress

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

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

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

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

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

↑こういうやつ!

この記事の要約
  • コピペで簡単に新しいマーカーができる。
  • 自分で色を決められるようになる。

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

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

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

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

で・す・が・!

赤いマーカー

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

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

緑色のマーカーとかほしくないですか!?

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

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

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

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

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

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

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

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

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

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

解説!

1行目

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

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

2行目

.marker-orange{

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

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

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

3行目

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

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

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

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

私のオススメは「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>

 

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

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

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

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

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

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

では!

COMMENT

メールアドレスが公開されることはありません。