世の中には、ブログ更新をスマホでしかしない方もいらっしゃるようですね。
ブログサービスごとに記事投稿の機能は、いろいろあるようなのですが、一般的に「見たまま(ビジュアル)編集」と「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:*** } >と同じですので、
なんて風にも応用が可能ですし、
囲み線の中の文章内で用いると、
の中を区切る(水色の点線)
こともできますので、ぜひ挑戦してみてください。
オマケ
水平線を並べてみたらストライプ模様っぽくなりました。
極めれば、HTMLとCSSだけで描画することも可能です。