ブログやサイトに
HTMLだけで
マーカー(線)を引きたい

ブログ運営について

SNS,集客,運用,ブログ,ビジネス,マネタイズ,副業,稼ぎたい,メンター,自己啓発,コンサル,コンサルタント,有名,安心

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
(仮名:Aさん/Bさん/お客様として)

宜しくお願いいたします


今回は知人が
出来ればオリジナルの
マーカーを引きたいけど
HTMLがわからないから
カスタマイズできない

と相談を受けたので
そちらに関して記事にします

相方
相方
相方
相方

すぐに使えるように
いくつかコピペ用
記事の中にコードを
貼っておきます♪

CSSを利用して引く方法もありますが
初心者であってもすぐ使えるように
ここではHTMLだけで引く方法を教えます

マーカーってなんぞ?

マーカーとは
マーカーペンで書いたような
色付きの下線です

要は
こういう強調するための線です
Rito
Rito

強調したい文字などに
よく使われてますよね♪

コピペして使用している方も多いですが
出来れば自分の好きな色に変更したい
と言う方のために簡単に説明いたします

覚えてしまうと
とても簡単ですよ♪

相方
相方

使用するコード

Rito
Rito

ベースとして
上記で引いた
黄色の線のコードを貼ります

  1. <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">ここに文字を入れる</span>

上記のコードをそのまま貼ると

ここに文字を入れる

このような表示になります

もし全体的に線を引きたい場合

(例)こういう線
相方
相方

上記のような全体を囲うような線が良いのであれば、下記のコードで大丈夫です

  1. <span style="background-color: #ffff00;"><b>ここに文字を入れる</b></span>
Rito
Rito

全体を囲う線も
細い方の線も使いたい

との事であれば
最初に書いたコードが
おすすめです

覚える場所

相方
相方

とりあえず
必要な場所だけ
覚えましょう♪

マーカー線の引き方

下記の部分です

(transparent 70%, #ffff00 0%)

transparent 70%の部分

この70%と言う数字は
線の太さです


この70%0%にすると

このように全部囲います

50%の場合は

これが50%です

100%にすると

このように色はつきません
#ffff00の部分

こちらの
#ffff00
と言うのはカラーコードです

このカラーコードを変えることで
自分の好きな色に変更できます

カラーコード HTML
等で検索すれば沢山ヒットします

とりあえず
カラーコードのサイトが知りたい
と言う事であればご参考までに
下記をご覧ください

0%の部分

最後の
0%
グラデーションです

此方は
数字が上がるほど
グラデーションがかかります

これが50%です
これが100%です
これが150%です
これが200%です
相方
相方

サイトの雰囲気などに
合わせて設定できます

全囲いしか使わない場合

<span style=”background-color: #ffff00;”><b>ここに文字を入れる</b></span>

Rito
Rito

赤い部分の
カラーコードだけ

変更すればOKです♪

ここからは
よく使いそうな
コピペ用のコード
貼っていきます

相方
相方

コピペ用コード

赤いコード
  1. <span style="background: linear-gradient(transparent 70%, #ff0000 0%);">赤いコード</span>
黄色のコード
  1. <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">黄色のコード</span>
青いコード
  1. <span style="background: linear-gradient(transparent 70%, #0000ff 0%);">青いコード</span>
水色のコード
  1. <span style="background: linear-gradient(transparent 70%, #00bfff 0%);">水色のコード</span>
黄緑のコード
  1. <span style="background: linear-gradient(transparent 70%, #7fff00 0%);">黄緑のコード</span>
マゼンタのコード
  1. <span style="background: linear-gradient(transparent 70%, #ff00ff 0%);">マゼンタのコード</span>
ラベンダー?のコード
  1. <span style="background: linear-gradient(transparent 70%, #8a2be2 0%);">ラベンダー?のコード</span>
相方
相方

カラーコードは
沢山ありますので
好みに合わせて
使ってみてください

パステルカラーの
カラーコードを使うと
更にマーカーペンのように
なりますよ♪

相方
相方

因みに相方は
先ほどのカラーコードのサイトの
パステルカラーをよく使います

相方
相方

グラデーションを
上手く使うと更に綺麗になります

というわけで

今回はHTMLだけで
マーカーペンのような線を引く方法と
自分好みにカスタマイズする方法でした