コピペで使える区切り線のインラインCSS

世の中には、ブログ更新をスマホでしかしない方もいらっしゃるようですね。

ブログサービスごとに記事投稿の機能は、いろいろあるようなのですが、一般的に「見たまま(ビジュアル)編集」と「HTML編集」が選べるかと思います。

ここでは、「HTML編集」で、HTMLタグ内に直接、属性としてスタイル(CSS。装飾)を書き込んで、見た目を変えられるインラインCSSを紹介します。

ご自分のブログ記事の「HTML編集」にて、簡単に使えるように、コピペ用テキストを載せておきます。

区切り線のタグ

区切り線(水平線)を引くには、<hr >

例)<hr >スタイル指定なし(お使いのブログテーマのCSS、もしくは見ているブラウザ標準のCSSに準拠)


色付き区切り線(水平線)

赤い区切り線 <hr style="border: 1px solid #f00;">


色を変えたい場合は、#f00(赤を表す簡易RGB表記)を、
#0f0(黄緑)
#00f(青)
#f66(濃いピンク)
#fcc(濃いピンク)
などに変えてください。
簡易で3桁で書きましたが、6桁の16進数表記でもOK。

こちらからイメージと色みから色を検索することができます。
色検索 – 原色大辞典
例)
柔らかいやさしい赤
[1] pink #ffc0cb
[2] lightpink #ffb6c1
[3] Web Safe Color #ffcccc

細かい点線

「solid」を「dotted」に変えます。
赤い点線区切り <hr style="border: 1px dotted #f00;">


※点線(dashed)はブラウザにより見栄えが異なります。

荒い点線

「solid」を「dashed」に変えます。
赤い荒い点線区切り <hr style="border: 1px dashed #f00;">


線を太くする

線の太さ1pxを3pxに変えます。
赤い荒い点線区切り 太め <hr style="border: 3px dashed #f00;">


「・・・・・・・・・」で区切ってる人が見受けられますが、 横幅の狭いデバイスでみると、
「・・・・・
・・」
と改行されて、「何だ、これは?無言の意味か??」とずっと不思議に思ってました(苦笑)

おわりに

今回は区切り線<hr >について、インラインCSSの書き方を紹介しました。
線の色、線の種類、太さの指定の仕方は、囲み線の線部分の<div style={border:*** } >と同じですので、

  赤い 荒い点線 太め で囲う <div style=”border: 3px dashed #f00;” >

なんて風にも応用が可能ですし、
囲み線の中の文章内で用いると、

囲み線


の中を区切る(水色の点線)

こともできますので、ぜひ挑戦してみてください。

オマケ


水平線を並べてみたらストライプ模様っぽくなりました。
極めれば、HTMLとCSSだけで描画することも可能です。

スポンサーリンク
レクタングル(大)

シェアする

スポンサーリンク
レクタングル(大)