daizuのつぶやき。

daizuが日々思っていることをつぶやいています。

【はてなブログ】ブログ超初心者のための|文章にマーカー線を引く方法|

f:id:daizumayuge:20210912093218j:plain

はてなブログの編集の機能の中には、

文字をおおきくしたり、
 
色を変えたり、
 
太字にしたり、
 
する機能などがありますが、
 
時には、もう少し文章を目立たせたい時ってありませんか?
 
そんな時、私は私はこんな風に文章にマーカーを引いたりします。
 
 

設定は以下のことをするだけです。
 


設定

  •  デザインCSSにコードを入力する
  •  「HTML編集」でマーカーを引きたい文章をコードで囲む

 
意外と簡単なので、
 
マーカーを引いてみたい方は
 
読み進めてみてくださいね!



はてなブログProにするなら▼
>>>はてなブログProの登録はこちら



デザインCSSにコード入力

f:id:daizumayuge:20210711210030p:plain:w280

ダッシュボード」> 「デザイン」をクリックします。


f:id:daizumayuge:20210711221801p:plain:w280

「スパナマーク」>「デザインCSS」をクリックし、下記コードをコピペします。

/*マーカー線・黄色*/
.marker-yellow {
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
} 

※※ 注意 ※※

この時、もうすでにコードが記述されている場合は、そのコードを消さないように注意してください。今回のコードは、一番下の何も書かれていないところに貼り付けてください。




文章にマーカーを引く

文章にマーカーを引きたい時は、「HTML編集」画面で、マーカーを引きたい箇所をコードで囲みます。

下記コードを、自分のメモ帳かなにかにコピペしておいてください。

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


そして、マーカーを引きたいなって時がきたら、「HTML編集」画面で、上記コードで文章を囲って見てください。



実際にマーカーを引いてみる

たとえば、「ここにマーカーを引きたい」とします。



手順

    f:id:daizumayuge:20191101164210p:plain:w480

     「HTML編集」 画面をクリックします。

    f:id:daizumayuge:20191101164314p:plain:w480

     「ここにマーカーを引きたい」をコードで囲う。

    f:id:daizumayuge:20191101164435p:plain:w480

     プレビューをみると、マーカーが引かれています。

    ※※ 注意 ※※

    確認する時は、必ず「プレビュー」を見てください。「編集見たまま」画面だと、マーカーが見えません。




マーカーの太さの変え方

私は、目立たせたい文章を太字に、マーカーの太さを60%にしています。太さを変えたい方は変えることも出来ます。

一度、貼り付けたデザインCSSを見てみます。

/*マーカー線・黄色*/
.marker-yellow{
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
}


transparentの横の%が、マーカーの太さを表します。

#fff799は、色を表していて、薄い黄色です。その#fff799の横の%は0%にしておきます。この#fff799の横の%を変えるとグレーのグラデーションが入ります。

ですので、単色のマーカーが引きたい場合、transparentの横の%を変えてマーカーの太さを変えていきます。transparentの横の%の数値が低いほど太く、高いほど細いマーカーが引けます。


 「transparent」とは「透明な」という意味です。上から◯%透明になるという風に覚えるといいかもしれません


 


以下、参照してください。



transparent 0%

サンプル1

transparent 50%

サンプル2

transparent 90%

サンプル3


のようになります。自分の好きな太さに設定してください。

あと、もうひとつ、別に太字にしなくてもいいよって方は、下記コードを使ってください。

/*マーカー線・黄色*/
.marker-yellow{
background: linear-gradient(transparent 60%, #fff799 0%);
}

マーカーの色の変え方

私は、主に黄色のマーカーを使っていますが、他の色にも変えられます。



赤はこんな感じ

青はこんな感じ

ピンクはこんな感じ

緑はこんな感じ


になります。

実際に、色を変更してみます。

下記が、デザインCSSに貼り付けた黄色のマーカーのコードです。

/*マーカー線・黄色*/
.marker-yellow{
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
}


#fff799というのが、黄色の色のコードです。このコードを自分の好きな色のコードに変え、デザインCSSに追加すれば、その色のマーカーも引けるようになります。

その時に、マーカー線の横の「黄色」と、marker-yellowの「yellow」を、その色がわかる単語に変えておいてください。


たとえば、青なら、マーカー線の横を「青」に、marker-yellowを「marker-blue」に、色のコードを「#afeeee」に変えます。


そして、「HTML編集」のときに、青のマーカーを引きたい文章をコードで囲います。

<span class="marker-blue">ここに好きな文章</span>


※※ 注意 ※※

marker-blueにしないと青になりませんので気をつけて下さい。





下記サイトで、カラーコードの番号を調べられます。

html-color-codes.info



自分の好きな色を探して、色を変更してみましょう。



まとめ

マーカーの引き方は以上です。

コツを覚えれば、いろんな色のマーカーが引けるようになります。好きな色を見つけて、デザインCSSに沢山いろんな色のコードを入れておきましょう。




▼クリック!応援お願いします!▼

PVアクセスランキング にほんブログ村