※記事を加筆修正したので再アップです。

 

こちらはアメブロやホームページで使える

下線(アンダーライン)一覧

のチート記事です。

 

記事を書く際に

見出しを作ったり、

強調したい箇所を示すのに大事なアンダーライン。

 

色々なバリエを作ってみました。

コピーペーストで使えるようにしてみたので

ぜひ使ってみてくださいね。

 

 

 

 

 

 

 
 
 

 

●下線のタグをコピペする方はこちらをクリック

 

●下線の細かい設定を知りたい方はこちらをクリック

 

 

 

文章に下線を引く方法(アメブロの場合)


 

①まず、アメブロの「ブログを書く」を開いたら[ HTML表示 ]に切り替えます。

 

 

②使いたい線の様式を、

記事の「下線一覧」(下の方に書いてあります)から選んだら、

線のタグ(<hr>とか<p style~>などの部分)

をコピーして貼り付けします。

 

貼りつけたら、入力したい文章をタグの中の

「ここに文字が入ります」

に上書きしてください。

 

 

 

③通常表示に切り替えて完了です。

 

 

 

 

 

細かい設定の仕方


 

★タグを書き直すことで色を変えたり線の太さや種類を変えることが出来ます。

 

下線のタグはこのような内容で構成されています。

 

ざっくりいうと…

 

1px→太さを表す部分。数値が大きくなると太くなります。

solid→線の種類を表す部分。二重線はdouble、点線はdottedになります。

#ff000→色を表す部分。色コードといいます。上記の例だと赤になります。


(具体的な変更方法は↓を読んでね。)

 

 

 

case1:色を変えたい!


「#」から始まる英数字のコードを「色コード」と言います。

色コードを変更することで色が変わります

 

(例)

赤の場合→#ff000

黄色の場合→#ffff00

 

他の色コードが見たい人は下記のリンクからどうぞ。

★参考★配色コード辞典

https://www.colordic.org/

 

(例)下線の色をピンクから青に変える場合

 

ピンクの下線タグ

<p style="border-bottom: 1px solid #f9458b;">ここに文字が入ります</p>


①ピンクのカラーコードである「#f9458b」 の部分を 

②青のカラーコードである「 #1e90ff」に変えます。

書き換え後

<p style="border-bottom: 1px solid #1e90ff;">ここに文字が入ります</p

 

 

 

 

case2: 線の太さや種類を変えたい

 

★種類はタグを一部書き換えると変更できます。

 

◎直線=solid

◎二重線=double

◎点線=dotted

◎破線=dashed

 
 
★太さは"px"の前の数値を変えます
 
細い 1px
太い 4px
 

 

 

 

 

case3: 線の長さを変えたい

 

タグを書き換えると、

線の長さを行いっぱいで表示したり、文章に合わせたりすることができます。

 

 

◎行いっぱいに線を引いたバージョン

 

◎文字に合わせて線を引いたバージョン

 

 

線の長さを変えるときは、タグの先頭である「p style~」または「span style~」の箇所を書き換えます。

 

 

ひらめき電球行いっぱいに線を引きたいときはタグの先頭を<p style>で上書きします。
 

ひらめき電球文字量に合わせて線を引きたい時はタグの先頭を<span style>で上書きします。

 

 

下線一覧



ここからは下線の見本一覧になります。
使いたい下線があったら、タグ(四角枠の中の文字)を
コピペして使ってください。

 

1)普通の区切り線(行いっぱいに線を表示する区切り線です。)

 


 

<タグ>

<hr>

 

 

2)ピンクの下線
 

ここに文字が入ります

 

<タグ>

<p style="border-bottom: 1px solid #f9458b;">ここに文字が入ります</p>

 

 

 

3)ピンクの下線(破線)
 

ここに文字が入ります

 

<タグ>

<p style="border-bottom: 2px dashed #f9458b;">ここに文字が入ります</p>


 

4)ピンクの点線
 

ここに文字が入ります

 

<タグ>

<p style="border-bottom: 2px dotted #f9458b;">ここに文字が入ります</p>

 

 

4)ピンクの下線/二重線
 

ここに文字が入ります

 

<タグ>

<p style="border-bottom: 1px double #f9458b;">ここに文字が入ります</p>

 

 

5)ピンクの下線/太め
 

ここに文字が入ります

 

<タグ>

<p style="border-bottom: 3px solid #f9458b;">ここに文字が入ります</p>

 


6)下線/蛍光ペンのような線(ピンク)

 

ここに文字が入ります

 

<タグ>

<p><span style="background: linear-gradient(transparent 60%, #ffd9ec 0%);">ここに文字が入ります</span></p>

 


7)下線/蛍光ペンのような線(黄色)

 

ここに文字が入ります

 

<タグ>

<p><span style="background: linear-gradient(transparent 60%, #feffa0 0%);">ここに文字が入ります</span></p>

 

 

8)下線/蛍光ペンのような線(水色)

 

ここに文字が入ります

 

<タグ>

<p><span style="background: linear-gradient(transparent 60%, #bae5ff 0%);">ここに文字が入ります</span></p>

 

 

 

以上です!

 

 

「使い方がわからない」「別なバリエーションも知りたい!」という人は

こちらでもレクチャーしてますよ!↓

パソコン作業が楽になる!オーダーメイドなパソコン勉強会

 

 

instagramバナー