【ブログ】記事内に区切り線を入れる方法/シンプル～カスタマイズ

ここではブログ記事内に区切り線（仕切り線）を入れる時の方法をお伝えます。コピペしても簡単に使えますし、自分の好みにアレンジすることも出来ます。またスマホでもPCを同じように表示されます。

シンプルな区切り線
デザイン区切り線
無料で使える区切り線（飾り線サイト）
1. FREE LINE DESIGN
まとめ

シンプルな区切り線

まずシンプルな区切り線（仕切り線）を紹介します。記事作成画面でHTMLに直接コピペすれば使えます。

一本線

一番シンプルな線です。ブログの機能として既に組み込まれていることも多いです。

これ

<hr>

色付き線

色のついたカラフルな線です。色や太さは自由に変えられます。

これ（赤色）

<hr style="border: 1px solid #ff0000;">

色を変える時はカラーコード「#ff0000」の部分を好みの色に変更します。直接カラーネームを入れても大丈夫です。

青色

<hr style="border: 1px solid blue;">

緑色

<hr style="border: 1px solid #008000;">

線の太さは「1px」の部分の数字で変更出来ます。

赤太線

<hr style="border: 5px solid #ff0000;">

もっと太く

<hr style="border: 20px solid #ff0000;">

線の種類

ここでは少し線の種類を変えてみます。

点線

<hr style="border: 1px dotted black;">

大きめの青点線

<hr style="border: 3px dotted blue;">

ここまでのシンプルな区切り線（仕切り線）であればHTMLに直接貼り付けて自分好みに変えることが出来ます。

使用する色のカラーコードはこのサイトを参考にして下さい。原色大辞典

デザイン区切り線

もう少しデザインに凝った区切り線（仕切り線）の場合はワードプレスのスタイルシートか記事編集画面のカスタムCSSに追加記述すると表示可能です。
※スタイルシート（style.css）はワードプレスの「ダッシュボード⇒外観⇒テーマエディター」にあります。その他のブログサービスでもデザインCSSに追記すれば可能です。

赤二重線

HTML（※ブログの記事作成画面に貼る方）

<hr class="sample1">

スタイルシート・CSS記述（ワードプレスや他のブログサービスのスタイルCSSに追記する方）

/* 赤二重線 */
hr.sample1 {
	border-top: 3px double red;
}

緑影線

HTML

<hr class="sample2">

スタイルシート・CSS記述

/* 緑影線 */
hr.sample2 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #008000 inset;
}

青グラデーション線

HTML

<hr class="sample3">

スタイルシート・CSS記述

/* 青グラデーション線 */
hr.sample3 { 
  border: 0; 
  height: 10px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #4169e1, #f0f0f0); 
}

Thank You バージョン

HTML

<hr class="sample4">

スタイルシート・CSS記述

/* Thank Youバージョン */
hr.sample4 {
  border-top: 3px solid red;
  text-align: center;
  border-left-style:none;
  border-right-style:none;
  border-bottom-style:none;
}
hr.sample4:after {
  content: 'Thank You';
  display: inline-block;
  position: relative;
  top: -1px;
  padding: 0 10px;
  background: red;
  color: #ffffff;
  font-size: 20px;
  font-weight:bold;
  border-left: hidden:
}

ここからが本文バージョン

HTML

<hr class="sample5">

スタイルシート・CSS記述

/* ここからが本文バージョン */
hr.sample5 {
  border-top: 5px solid #191970;
  text-align: center;
  border-left-style:none;
  border-right-style:none;
  border-bottom-style:none;
}
hr.sample5:after {
  content: 'ここからが本文';
  display: inline-block;
  position: relative;
  top: -3px;
  padding: 0 10px;
  background: #191970;
  color: #ffffff;
  font-size: 20px;
  font-weight:bold;
  border-left: hidden
  border-radius: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px; 
}