文字をかんたんに囲めたらなぁ
でもプラグインいれるのもなぁ
そう感じます。
わたしもです。
そこでコピペしてかんたんに使えるHTMLコードを用意しました！
囲み文字はデフォルトの色から選べるのでページに統一感がうまれますよ！
囲み文字でブログの文字をどんどん囲っていきましょう！
かんたん囲み文字 ３３種類
デフォルトの全１０色＋背景色なしから選べますよ。
背景色なし＋各色とも囲み文字が３種類です。
１０色あるので、ぜんぶで３３種類の囲み文字です。
背景色なし
背景色なし
ここに文字を入れる
<span style="border-width: thin; border-style: solid;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; border-style: solid; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; border-style: solid; padding:15px 15px;">ここに文字を入れる</span>
鮮やかなシアンブルー
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #0693E3;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #0693E3; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #0693E3; padding:15px 15px;">ここに文字を入れる</span>
淡いシアンブルー
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #8ED1FC;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #8ED1FC; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #8ED1FC; padding:15px 15px;">ここに文字を入れる</span>
鮮やかなグリーンシアン
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #00D084;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #00D084; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #00D084; padding:15px 15px;">ここに文字を入れる</span>
薄いグリーンシアン
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #7BDCB5;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #7BDCB5; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #7BDCB5; padding:15px 15px;">ここに文字を入れる</span>
明るく鮮やかな琥珀
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FCB900;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FCB900; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FCB900; padding:15px 15px;">ここに文字を入れる</span>
明るく鮮やかなオレンジ
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FF6900;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FF6900; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる<span style="border-width: thin; color: #ffffff; border-style: solid; background: #FF6900; padding:15px 15px;">ここに文字を入れる</span>
鮮やかな赤
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #CF2E2E;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる<span style="border-width: thin; color: #ffffff; border-style: solid; background: #CF2E2E; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #CF2E2E; padding:15px 15px;">ここに文字を入れる</span>
淡いピンク
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #F78DA7;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #F78DA7; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #F78DA7; padding:15px 15px;">ここに文字を入れる</span>
鮮やかなパープル
背景色付き
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #9B51E0;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #9B51E0; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #9B51E0; padding:15px 15px;">ここに文字を入れる</span>
シアンブルーグレー
背景色付き
ここに文字を入れる<span style="border-width: thin; color: #ffffff; border-style: solid; background: #ABB8C3;">ここに文字を入れる</span>
余白多め～左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #ABB8C3; padding:0px 15px;">ここに文字を入れる</span>
余白多め～上下左右
ここに文字を入れる
<span style="border-width: thin; color: #ffffff; border-style: solid; background: #ABB8C3; padding:15px 15px;">ここに文字を入れる</span>
