こんにちは。
『やさしいブログの作り方』の松田です。

いろんな方のブログを拝見していると、冒頭から本題に入る際や、記事終わりから終わりの挨拶に入る時などに仕切りを付けられているブログを見かけます。

仕切りというのは、

゚・*:.。..。.:*・゚゚・*:.。..。.:*・゚



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

などですね。

ただこれだとパソコンで見た時にはきれいに1行で表示されていても、ケータイやスマートフォンで見ると

・*:.。..。.:*・゚゚・*:.
。..。.:*・゚


とか

・・・・・・・・・・・
・・・・・・・・・・・
・・・・・・・・・・


になったりするんですね。

いまいち区切り線っぽくならないわけです。


できればどの環境で見ても区切り線らしく1行で表示させたい場合、そのやり方はいろいろありますが、今日は簡単なものを一つご紹介します。



罫線を引くタグ <hr> (今この行の上下に引いてある線です。)


hrというのは多分horizon(水平線)から来ていると思うのですが、このタグを1つ入れると単純に横罫線が挿入されます。

通常HTMLタグは開始タグと終了タグのセットで使いますが、この<hr>タグはこれ単体で使います。

使い方はとても簡単で、横罫線を引きたい場所に<hr>を入れるだけ。

(※ 記事編集画面を標準エディタで編集している人は、入力スペースの上または下にあるHTMLタグを表示をクリックしてタグ編集エディタに切り替えてから<hr>を書いてください。)



この<hr>の書き方もいろいろあります。

■ 左右に余白を入れたい場合 <hr width="80%">




■ 罫線に色を付けたい場合 <hr color="#ff0000">




■ 線を太くしたい場合 <hr size="10" color="#ff0000">




■ 細かい点線にしたい場合 <hr style="border:1px dotted #ff0000">




■ 粗めの点線で左右に余白をつけたい場合 <hr width="80%" style="border:1px dashed #ff0000">




ご参考までに。^^


最後までお読みいただきありがとうございました。

4つの無料メール講座配信中

これからブログを頑張っていきたい! まずは基本から。
やさしいブログづくりのための、やさしいメール講座(全10回)

「来てよかったです!」と言われるイベントにするために。
少人数イベント実施のための5つのステップ+αが学べる無料メール講座(全10回)

メルマガ、やってみたいけどどうすれば?という方へ
初めてでも安心して始められる、ステップメールの作り方メール講座(全10回)

パソコンワーク、もっと時短できますよ。
ブロガーさんのための、パソコンワーク時短術10の技メール講座


2016年1月11日、出版しました!

ブログでビジネスを軌道に乗せるための行動術

ブログを続けていてよかった、そんな気持ちを一人でも多くの人と共有したいと思っています。^^