ワードプレスの枠線のHTMLソースです。

ワードプレスのテキストエディターで使用する枠線のHTMLソースです。そのままコピペで使用できます。

下のHTMLソースをコピーして、ワードプレスのダッシュボードの投稿の画面で、右上にあるテキストエディターをクリックして表示させペーストします。その後、ビジュアルをクリックすると枠線ができていますので中の文字を削除して、書きたい内容を記入すれば良いです。

---

枠線のソースです。一気に書いてしまいましたがソースを書く時間がなくなりました。今日はこれでやめます。続きは今後書いていきますので、少しづつやります。よろしくお願いいたします。

---

①

<div style="background: #eeeeff; padding: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div>

②

<div style="background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div>

③

<div style="background: #ffeeee; padding: 10px; border: 2px dotted #ff0000;">枠内の記事本文</div>

④

<div style=";background: #ffeeee; padding: 10px; border-radius: 10px; border: 2px dotted #ff0000;">枠内の記事本文</div>

⑤

<div style="background: #bfffdf; padding: 10px; border: 2px dotted #00bf00;">枠内の記事本文</div>

⑥

<div style="background: #bfffdf; padding: 10px; border-radius: 10px; border: 2px dotted #00bf00;">枠内の記事本文</div>

⑦

<div style="background: #f7f7f7; padding: 10px; border: 2px dotted #CCCCCC;">枠内の記事本文</div>

⑧

<div style="background: #ffeeee; padding: 10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;">枠内の記事本文</div>

⑨

<div style="background: #f7f7f7; padding: 10px; border-radius: 10px; border: 2px dotted #CCCCCC;">枠内の記事本文</div>

⑩

<div style="background: #ffeeee; padding: 10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;">枠内の記事本文</div>

⑪

<div style="background: #f7f7f7; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA; border: 2px dotted #CCCCCC;">枠内の記事本文</div>

⑫

<div style="background: #f7f7f7; padding: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>

⑬

<div style="background: #f7f7f7; padding: 10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</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="padding: 10px; border-radius: 20px; border: 3px dotted #00ff00;">枠内の記事本文</div>

One Point! 実線 → solid 点線 → dotted 破線 → dashed 二重線 → double 線なし → none

⑰

<div style="background-image: linear-gradient(#dd4a5c,#e4707e,white,#e4707e,#dd4a5c); background-color: #ffeeee; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br />○○○<br />○○○<br />○○○<br />○○○</div>

⑱

<div style="background-image: linear-gradient(#e4707e,white,white,white,#e4707e); background-color: #ffeeee; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br />○○○<br />○○○<br />○○○<br />○○○</div>

⑲

<div style="background-image: linear-gradient(#f7fbfc,#d9edf2,#add9e4); background-color: #ffeeee; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○<br />○○○<br />○○○<br />○○○<br />○○○</div>

⑳

<div style="background-image: linear-gradient(orange,white); background-color: orenge; padding: 10px; border: 2px dotted orange;">○○○</div>

㉑

<div style="background-image: linear-gradient(blue,white); background-color: blue; padding: 10px; border: 2px dotted blue;">○○○</div>

㉒

㉓

㉔

㉕

◆枠の見出し

1）枠内の記事本文１
2）枠内の記事本文２
3）枠内の記事本文３

㉖

◆枠の見出し

1）枠内の記事本文１
2）枠内の記事本文２
3）枠内の記事本文３

㉗

㉘

㉙

◆ここにタイトル

ここは文章･･･
ここは文章･･･
ここは文章･･･

㉚

■タイトルはこちら■

㉛■タイトルはこちら■

㉜■タイトルはこちら■

㉝■タイトルはこちら■

㉞■タイトルはこちら■

㉟■タイトルはこちら■

㊱■タイトルはこちら■

㊲■タイトルはこちら■

㊳

㊴

㊵

㊶

㊷

㊸

㊹

㊺

㊻

㊼

㊽

㊾

㊿

51、

52、

53、

54、

55、

56、

57、

58、

59、

60、

61、

62、

63、