保存版にできるので、メモ帳に貼付けるなどしてコピペ活用してください。
まず始めに線や囲い枠の中の色を変更する時に使うカラーコードのご紹介
このサイトは色にをカーソルあわせるとサイトの背景色が変わり色のイメージがしやすいです。
カラーコード一覧サイトはコチラ
囲い枠のいろいろ集☆シンプル囲み枠
ここに書いてね♡
<div style="border: 1px solid #FF0000; padding: 15px;">ここに書いてね♡</div>
便利なシンプル枠８種類はコチラ
ここに書いてね♡
<div style="background:#ffeeee; padding:10px; border:1px solid #ff0000;">ここに書いてね♡</div>
ここに記事書いてね♥︎
<div style="padding:10px;border-radius: 5px;border: 2px solid #ff0000;">ここに記事書いてね♥︎</div>
ココに書いてね♡本文
<div style="padding:10px;border-radius: 10px; border: 5px double #0000ff;">ココに書いてね♡本文</div>
ここに記事書いてね♥︎
<div style="background:#eeeeff; padding:10px; border:2px dotted #0000ff;">ここに記事書いてね♥︎</div>
解説☆background囲みの中の事です。中の色を変更するには#eeeeffを変更してください。
☆dottedは点線囲いの事です。 点線囲いの色を変更するには#0000ffを変更してください。
☆？px表示は点線や線の太さを表します。
ここに記事書いてね♥︎
<div style="background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;">ここに記事書いてね♥︎</div>
ココに書いてね♡本文
<div style="padding:10px;border-radius: 10px; border: 5px double #0000ff;">ここに記事書いてね♥︎</div>
■タイトル書いてね♥︎■
ココに書いてね♡
改行後の本文はココに書いてね♡
改行後の本文はココに書いてね♡
<div style="background:#FF6699; border:1px solid #FF6699; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold">■タイトル書いてね♥︎■</font></div><div style="border:1px solid #FF6699; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はココに書いてね♡</div>
解説☆backgroundは、タイトル欄の枠の中の事 色変更は、#FF6699を変更する
☆solidはタイトル欄の枠の事 色変更は#FF6699を変更する
☆font style="color:#ffffff 文字の色は白です。
☆border:1px solid #FF6699 記事欄囲い枠の線の太さは１pxで記事囲い枠の色は#FF6699
線の種類をまとめて見ましたsolid・・・直線
dotted・・・点線
dashed・・・破線
double・・・二重線
見出しタイトル♡
ココに書いてね♡
ココに書いてね♡
ココに書いてね♡
ココに書いてね♡
ココに書いてね♡
<div style="height:12px;"><span style="margin-left:10px; padding:6px 10px; background:#3b5998; color:#ffffff; font-weight:bold;border-radius:5px;">見出しタイトル</span></div><div style="border:2px solid #3b5998; padding:30px 15px 10px; font-size:0.83em;border-radius:5px;">ココに書いてね♡ココに書いてね♡ココに書いてね♡</div>
見出しタイトルは、短めに書く事をお勧めします。
☆タイトルが書ける囲み枠Aタイプ
<fieldset style="border:1px solid #ff0000;"><legend>タイトルココに書いてね♡ </legend>
ココに書いてね♡
ココに書いてね♡
ココに書いてね♡
</fieldset>
タイトルが書ける囲み枠Aタイプ①はコチラ
タイトルが書ける囲み枠Aタイプ②はコチラ
☆記事内の見出し
ここにタイトルを書いてね♥︎
<div style="padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold; border-bottom-color: rgb(0, 0, 102); border-left-color: rgb(0, 0, 102); border-bottom-width: 2px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;">ここにタイトルを書いてね♥︎</div>
記事内の見出し ８色はこちら
便利に使えるHTML区切り線
<hr>と記載すると上記の区切り線になります。
<br>と記載すると本文の改行ができます。