記事を一区切り★仕切り線(水平線)をカスタマイズ

水平線002

ブログを書いている時、仕切り線(水平線)を入れたいな~と思ったことはありませんか?

例えば私の場合、こんなふうに使っています。

水平線001

話題が変わる部分に、仕切り線(水平線)を使います。

よく仕切り線として、キーボードの文字キー「ー」長音やハイフンを連打して使っているのを見かけます。

パソコンで見た場合の長さを丁度よく調整したつもりでも、

水平線002

 

スマホから見ると、画面の表示サイズが異なるので、おかしなことになってます・・・

水平線003

 

私が使っている仕切り線(水平線)は、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ケタのカラーコード番号を入れる

コチラのサイトから、好きな色をコピーしてみましょう!

 

やってみてくださいね!

ABOUTこの記事をかいた人

パソコン教室に8年勤務後に独立、2012年6月から自宅にて【ぴんぽいんとパソコン教室】をスタート。おうちサイズで起業をする女性を、パソコン&スマホという分野からサポートできるよう、日々アンテナを張って新しい情報を仕入れ勉強中。ちょっと変わった変なものが好きなB型。趣味はカエル雑貨収集とフィギュアスケート観戦(ちょっと滑れます)。