記事を一区切り★仕切り線(水平線)をカスタマイズ
ブログを書いている時、仕切り線(水平線)を入れたいな~と思ったことはありませんか?
例えば私の場合、こんなふうに使っています。
話題が変わる部分に、仕切り線(水平線)を使います。
よく仕切り線として、キーボードの文字キー「ー」長音やハイフンを連打して使っているのを見かけます。
パソコンで見た場合の長さを丁度よく調整したつもりでも、
スマホから見ると、画面の表示サイズが異なるので、おかしなことになってます・・・
私が使っている仕切り線(水平線)は、CSSとHTMLの記述を利用しています。
これを使うと、画面の表示サイズが異なっても、中途半端な長さや、変な位置で折り返されることはありません。
さらに、仕切り線の色と形状をカスタマイズすることができます!
(普通は、グレーの一本線で表示されます)
以下に、仕切り線(水平線)のカスタマイズ方法をご説明します。
目次
仕切り線(水平線)のカスタマイズ方法
【ブログをカスタマイズしている場合】
※この方法は、スマホでは色と線種は反映されません
1.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 #カラーコード;
}
2.赤文字「カラーコード」に6ケタのカラーコード番号を入れる
コチラのサイトから、好きな色をコピーしてみましょう!
3.「保存」ボタンをクリック
4.記事の編集画面で、仕切りを入れたい場所に以下の記述を追加する
「HTMLタグ」画面に <hr> を追加
【ブログをカスタマイズしていない場合】
※この方法は、スマホでも色と線種が反映されます
1.以下から線の種類を選び、以下の記述を「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 />
2.赤文字「カラーコード」に6ケタのカラーコード番号を入れる
コチラのサイトから、好きな色をコピーしてみましょう!
やってみてくださいね!