蛍光ペンを駆使せよ!記事が鮮やかに!?

ども!今回は鮮やかに文章を強調する方法ということで

蛍光ペンマーカーの使い方をお伝えします!

 

f:id:mjek-0829-0207:20190117035156j:plain

 

赤字とか、太字とか、下線とか、文字サイズとかで

デフォルトは強調するじゃないですか。

 

それじゃまだまだ不十分だ、っていう中級者むけですね!

  

 

CSS設定、HTML設定

 

まず、最初に「デザインCSS」を開きます。

 

f:id:mjek-0829-0207:20190114122331p:plain

f:id:mjek-0829-0207:20190114122756p:plain     f:id:mjek-0829-0207:20190114123110p:plain

 

赤枠に以下のコードを保存します!

.marker-pink {
background: linear-gradient(transparent 60%, #ffc0cb 60%);
}

 

 そして、ブログ記事を書く際、HTML編集にて以下のコードを貼り付けます。

<span class="marker-pink">好きな文章</span>

 

これでピンクの蛍光マーカーを付けることができます!

 

何色でも使える!

 

もし、ピンク以外を使いたい、といった場合ですと

 

まず、「デザインCSS」に追加保存したコードの色の部分を変えます。

「#ffc0cb」のところですね。そして、変更後の色をコード序盤の「pink」から変更して追加で登録します。

 

※追加をする場合は、pinkは消さないでください!

 使う色は全て登録する、という形です!

 

ex)黄色

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 60%);
}

 

そして、html編集にて、上のコードのpinkをcssに登録した色に変えて作成します。

 

ex)黄色

<span class="marker-yellow">好きな文章</span>

 

 色のコードはこちらを参考にしてください

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

※記事を見やすくするために、色鮮やかに複数の色を使う方がいらっしゃいますが、逆に記事が見えにくくなり、記事の離反につながりますので、できれば1色。多くて2色のマーカーにしましょう!

 

 

以上!蛍光マーカーでした。

 

他にもこんな記事があるので合わせて読んでください^^


mjek-0829-0207.hatenablog.com


 

mjek-0829-0207.hatenablog.com

 

 今回の記事が参考になりましたら、「はてなブックマーク」を押して頂けると励みになります!