記事を一区切り★仕切り線（水平線）をカスタマイズ
ranacoブログを書いている時、仕切り線（水平線）を入れたいな～と思ったことはありませんか？
例えば私の場合、こんなふうに使っています。
話題が変わる部分に、仕切り線（水平線）を使います。
よく仕切り線として、キーボードの文字キー「ー」長音やハイフンを連打して使っているのを見かけます。
パソコンで見た場合の長さを丁度よく調整したつもりでも、
スマホから見ると、画面の表示サイズが異なるので、おかしなことになってます・・・
私が使っている仕切り線（水平線）は、CSSとHTMLの記述を利用しています。
これを使うと、画面の表示サイズが異なっても、中途半端な長さや、変な位置で折り返されることはありません。
さらに、仕切り線の色と形状をカスタマイズすることができます！
（普通は、グレーの一本線で表示されます）
以下に、仕切り線（水平線）のカスタマイズ方法をご説明します。
目次
仕切り線（水平線）のカスタマイズ方法
【ブログをカスタマイズしている場合】
※この方法は、スマホでは色と線種は反映されません
１．CSSの編集画面の一番下に、以下から線の種類を選び、記述をコピペする
——————————————–*/
hr {
border:none;
height:1px;
border-top: solid 1px #カラーコード;
}
——————————————–*/
hr {
border:none;
height:1px;
border-top: dotted 1px #カラーコード;
}
——————————————–*/
hr {
border:none;
height:1px;
border-top: dashed 1px #カラーコード;
}
——————————————–*/
hr {
border:none;
height:1px;
border-top: double 3px #カラーコード;
}
２．赤文字「カラーコード」に６ケタのカラーコード番号を入れる
コチラのサイトから、好きな色をコピーしてみましょう！
３．「保存」ボタンをクリック
４．記事の編集画面で、仕切りを入れたい場所に以下の記述を追加する
「HTMLタグ」画面に <hr> を追加
【ブログをカスタマイズしていない場合】
※この方法は、スマホでも色と線種が反映されます
１．以下から線の種類を選び、以下の記述を「HTMLタグ」内にコピペする
線種：直線
<br /><br />
<hr style=”border:none; border-top:1px solid #カラーコード; height:1px;”>
<br /><br />
線種：点線
<br /><br />
<hr style=”border:none; border-top:1px dotted #カラーコード; height:1px;”>
<br /><br />
線種：破線
<br /><br />
<hr style=”border:none; border-top:1px dashed #カラーコード; height:1px;”>
<br /><br />
線種：二重線
<br /><br />
<hr style=”border:none; border-top:3px double #カラーコード; height:1px;”>
<br /><br />
２．赤文字「カラーコード」に６ケタのカラーコード番号を入れる
コチラのサイトから、好きな色をコピーしてみましょう！
やってみてくださいね！
