daizuのつぶやき。

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

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

 

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

 

文字をおおきくしたり、

 

色を変えたり、

 

太字にしたり、

 

する機能などがありますが、

 

時には、もう少し文章を目立たせたい時ってありませんか❓

 

そんな時、私はこんな風に文章にマーカーを引いたりします。

 

 

設定は、

 

✔️デザインCSSにコードを入力する

✔️「HTML編集」でマーカーを引きたい文章をコードで囲む

 

だけです。

 

 

意外と簡単なので、

 

マーカーを引いてみたい方は

 

読み進めてみてくださいね(^_−)−☆

 

 

▼はてなブログProにするなら▼

 

>>>はてなブログProの登録はこちら

 

 

デザインCSSにコード入力

 

f:id:daizumayuge:20190922092049p:plain

 

 

[ダッシュボード][デザイン] をクリックする。

 

f:id:daizumayuge:20190914144123p:plain

 

 

[パナマーク] [デザイン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

 

 

 [HTML編集] 画面をクリックする。

 

f:id:daizumayuge:20191101164314p:plain

 

 

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

 

マーカー プレビュー

 

 

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

 

確認する時は、必ず「プレビュー」を見てください。

 

「編集見たまま」画面だと、マーカーが見えません。

 

 

マーカーの太さの変え方

 

私は、目立たせたい文章を太字に、マーカーの太さを60%にしています。

 

太さを変えたい方は変えることも出来ます。

 

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

 

f:id:daizumayuge:20191101205627p:plain

 

 

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

 

#fff799は、色を表していて、薄い黄色です。

 

その#fff799の横の%0%にしておきます。

 

この%を変えるとグレーのグラデーションが入ります。

 

なので、単色のマーカーが引きたい場合、

 

transparentの横の%を変えていきます。

 

transparentの横の%の数値が

 

低いほど太く、高いほど細いマーカーが引けます。

 

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

 

 

▼合わせて読みたい

 

 

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

 

transparent 0%

サンプル1

transparent 50%

サンプル2

transparent 90%

サンプル3

 

のようになります。

 

自分の好きな太さに設定してください。

 

あと、もうひとつ、

 

べつに太字にしなくてもいいよって方は、

 

下記の青丸で囲んだ部分を消してください。

 

f:id:daizumayuge:20191101224619p:plain

 

 

 

マーカーの色の変え方

 

私は、主に黄色のマーカーを使っていますが、

 

他の色にも変えられます。

 

赤はこんな感じ

青はこんな感じ

ピンクはこんな感じ

緑はこんな感じ

 

になります。

 

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

 

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

 

f:id:daizumayuge:20191101233253p:plain

 

 

#fff799というのが、黄色の色のコードです。

 

このコードを自分の好きな色のコードに変え、

 

デザインCSSに追加すれば、

 

その色のマーカーも引けるようになります。

 

 

その時に、

 

マーカー線の横の「黄色」と、

 

marker-yellowのyellow

 

その色がわかる単語に変えておいてください。

 

 

たとえば、青なら、

 

マーカー線の横を「青」に、

 

marker-yellowをmarker-blueに、

 

色のコードを#afeeeeに変えます。

 

そして、「HTML編集」のときに

 

青のマーカーを引きたい文章をコードで囲います。

 

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

 

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

 

 

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

 

 

html-color-codes.info

 

自分の好きな色を探して、

 

色を変更してみましょう。

 

 

まとめ

 

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

 

コツを覚えれば、いろんな色のマーカーが引けるようになります。

 

好きな色を見つけて、デザインCSSに沢山いろんな色のコードを入れておきましょう。

 

 

▼こちらもチェック!

 

 

 

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

 

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