ブログやサイトに
HTMLだけで
マーカー（線）を引きたい
本記事の概要
ブログ運営について
今回は知人が
出来ればオリジナルの
マーカーを引きたいけど
HTMLがわからないから
カスタマイズできない
と相談を受けたので
そちらに関して記事にします
すぐに使えるように
いくつかコピペ用も
記事の中にコードを
貼っておきます♪
CSSを利用して引く方法もありますが
初心者であってもすぐ使えるように
ここではHTMLだけで引く方法を教えます
マーカーってなんぞ？
マーカーとは
マーカーペンで書いたような
色付きの下線です
こういう強調するための線です
強調したい文字などに
よく使われてますよね♪
コピペして使用している方も多いですが
出来れば自分の好きな色に変更したい
と言う方のために簡単に説明いたします
覚えてしまうと
とても簡単ですよ♪
使用するコード
ベースとして
上記で引いた
黄色の線のコードを貼ります
- <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">ここに文字を入れる</span>
上記のコードをそのまま貼ると
このような表示になります
もし全体的に線を引きたい場合
上記のような全体を囲うような線が良いのであれば、下記のコードで大丈夫です
- <span style="background-color: #ffff00;"><b>ここに文字を入れる</b></span>
全体を囲う線も
細い方の線も使いたい
との事であれば
最初に書いたコードが
おすすめです
覚える場所
とりあえず
必要な場所だけ
覚えましょう♪
下記の部分です
(transparent 70%, #ffff00 0%)
この70％と言う数字は
線の太さです
この70％を0％にすると
50％の場合は
10０%にすると
こちらの
#ffff00
と言うのはカラーコードです
このカラーコードを変えることで
自分の好きな色に変更できます
「 カラーコード HTML 」
等で検索すれば沢山ヒットします
とりあえず
カラーコードのサイトが知りたい
と言う事であればご参考までに
下記をご覧ください
最後の
0％
はグラデーションです
此方は
数字が上がるほど
グラデーションがかかります
サイトの雰囲気などに
合わせて設定できます
全囲いしか使わない場合
<span style=”background-color: #ffff00;”><b>ここに文字を入れる</b></span>
赤い部分の
カラーコードだけ
変更すればOKです♪
ここからは
よく使いそうな
コピペ用のコードを
貼っていきます
コピペ用コード
赤いコード
- <span style="background: linear-gradient(transparent 70%, #ff0000 0%);">赤いコード</span>
黄色のコード
- <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">黄色のコード</span>
青いコード
- <span style="background: linear-gradient(transparent 70%, #0000ff 0%);">青いコード</span>
水色のコード
- <span style="background: linear-gradient(transparent 70%, #00bfff 0%);">水色のコード</span>
黄緑のコード
- <span style="background: linear-gradient(transparent 70%, #7fff00 0%);">黄緑のコード</span>
マゼンタのコード
- <span style="background: linear-gradient(transparent 70%, #ff00ff 0%);">マゼンタのコード</span>
ラベンダー？のコード
- <span style="background: linear-gradient(transparent 70%, #8a2be2 0%);">ラベンダー？のコード</span>
カラーコードは
沢山ありますので
好みに合わせて
使ってみてください
パステルカラーの
カラーコードを使うと
更にマーカーペンのように
なりますよ♪
因みに相方は
先ほどのカラーコードのサイトの
パステルカラーをよく使います
グラデーションを
上手く使うと更に綺麗になります
というわけで
今回はHTMLだけで
マーカーペンのような線を引く方法と
自分好みにカスタマイズする方法でした