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

スポンサーリンク

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

文字をおおきくしたり、

色を変えたり、

太字にしたり、

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

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

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

設定は、

✔️デザイン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アクセスランキング にほんブログ村

コメント

タイトルとURLをコピーしました