囲み枠

●オレンジ色のコード（背景なし。）

ここから先は有料部分です

画像1

<div style="border:5px solid #F90 ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●オレンジ色の点線の枠になります。（背景なし。）

画像2

<div style="border:5px dashed #F90 ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●オレンジ色の囲み枠（実線）

画像3

<div style="border:5px solid #F90 ;padding:10px;border-radius:10px;background:#FFDBA6;">ここに文章を記載する</div>
●オレンジ色の囲み枠あり（点線）

●オレンジ色の囲み枠（点線）

画像4

<div style="border:5px dashed #F90 ;padding:10px;border-radius:10px;background:#FFDBA6;">ここに文章を記載する</div>

●黄色のカラーの囲み枠（実線）

画像5

<div style="border: 5px solid #ffff00 ; padding: 10px; border-radius: 10px; background: #fffacd ;">ここに文章を記載する</div>

●黄色のカラー囲み枠（点線）

画像6

<div style="border: 5px dashed #ffff00 ; padding: 10px; border-radius: 10px; background: #fffacd ;">ここに文章を記載する</div>

●レッドカラーの囲み枠

画像7

<div style="border: 5px solid #dc143c ; padding: 10px; border-radius: 10px; background: #ff7f50 ;">ここに文章を記載する</div>

●レッドカラーの囲み枠

画像8

<div style="border: 5px solid #dc143c ; padding: 10px; border-radius: 10px; background: #ff7f50 ;">ここに文章を記載する</div>

●ピンク色の枠

画像9

<div style="border:5px solid #F9F ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●ピンク色の枠

画像10

<div style="border:5px dashed #F9F ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●ピンク色の枠

画像11

<div style="border:5px solid #F9F ;padding:10px;border-radius:10px;background:#FFDBFF;">ここに文章を記載する</div>

●ピンク色の枠

画像12

<div style="border:5px dashed #F9F ;padding:10px;border-radius:10px;background:#FFDBFF;">ここに文章を記載する</div>

●グレー色の枠

画像13

<div style="border:5px solid #CCC ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●グレー色の枠

画像14

<div style="border:5px dashed #CCC ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●グレー色の枠

画像15

<div style="border: 10px ridge #cccccc ; padding: 10px;">ここに文章を記載する</div>

●グレー色の枠

画像16

<div style="border: 5px double #cccccc ; padding: 10px;">ここに文章を記載する</div>

●グレー色の枠

画像17

<div style="border:5px solid #CCC ;padding:10px;border-radius:10px;background:#EEE;">ここに文章を記載する</div>

●グレー色の枠

画像18

<div style="border:5px dashed #CCC ;padding:10px;border-radius:10px;background:#EEE;">ここに文章を記載する</div>

●赤色の枠

画像19

<div style="border:5px solid #F00 ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●赤色の枠

画像20

<div style="border:5px dashed #F00 ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●赤色の枠

画像21

<div style="border:5px solid #F00 ;padding:10px;border-radius:10px;background:#FFA6A6;">ここに文章を記載する</div>

●赤色の枠

画像22

<div style="border:5px dashed #F00 ;padding:10px;border-radius:10px;background:#FFA6A6;">ここに文章を記載する</div>

●青色の枠

画像23

<div style="border:5px solid #0CF ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●青色の枠

画像24

<div style="border:5px dashed #0CF ;padding:10px;border-radius:10px;">ここに文章を記載する</div>

●青色の枠

画像25

<div style="border:5px solid #0CF ;padding:10px;border-radius:10px;background:#A6EDFF;">ここに文章を記載する</div>

●青色の枠

画像26

<div style="border:5px dashed #0CF ;padding:10px;border-radius:10px;background:#A6EDFF;">ここに文章を記載する</div>

●黒色の枠

画像27

<div style="border:5px solid #000 ;padding:10px;border-radius:10px;background:#A6A6A6;">ここに文字を記載する</div>

●黒色の枠

画像28

<div style="border:5px dashed #000 ;padding:10px;border-radius:10px;background:#A6A6A6;">ここに文字を記載する</div>

●黒色の枠

画像29

<div style="border:10px double #000 ;padding:10px;border-radius:10px;background:#A6A6A6;">ここに文字を記載する</div>

●グラデーションカラー

画像30

<div style="background: #FDF6E3 ; padding: 15px; border: 4px inset #F08080 ; border-radius: 10px; word-break: break-all;">ここに文章を記載する</div>

●グラデーションカラー

画像31

<div style="background: #F1F1F1 ; padding: 15px; border: 4px inset #787878 ; border-radius: 10px; word-break: break-all;">ここに文章を記載する</div>

●マットなカラー

画像32

<div style="background: #F2EAD4 ; padding: 15px; border: 0px solid #F2EAD4 ; border-radius: 10px; word-break: break-all;">ここに文章を記載</div>

●マットなカラー

画像33

<div style="background: #F08080 ; padding: 15px; border: 0px solid #F08080 ; border-radius: 10px; word-break: break-all;">ここに文章を記載する</div>

●マットなカラー

画像34

<div style="background: #F08080 ; padding: 15px; border: 0px solid #F08080 ; border-radius: 10px; word-break: break-all;">ここに文章を記載する</div>

●バリエーション

画像35

<div style="border: 5px solid #800000 ; padding: 10px; border-radius: 10px; background: #ffff00 ;">ここに文章を記載する</div>

●バリエーション

画像36

<div style="border: 5px dashed #800000 ; padding: 10px; border-radius: 10px; background: #ffff00 ;">ここに文章を記載する</div>

●バリエーション

画像37

<div style="border: 5px solid #3cb371 ; padding: 10px; border-radius: 10px; background: #f0f8ff ;">&lt;div style="border: 5px solid #800000 ; padding: 10px; border-radius: 10px; background: #ffff00 ;"&gt;ここに文章を記載する&lt;/div&gt;</div>

●バリエーション

画像38

<div style="border: 5px solid #800000 ; padding: 10px; border-radius: 10px; background: #ffff00 ;">ここに文章を記載する</div>

●バリエーション

画像39

<div style="border: 5px solid #00ff7f ; padding: 10px; border-radius: 10px; background: #7fffd4 ;">ここに文章を記載する</div>

●バリエーション

画像40

<div style="border: 5px solid #4b0082 ; padding: 10px; border-radius: 10px; background: #ee82ee ;">ここに文章を記載する</div>

●バリエーション

画像41

<div style="border: 5px solid #fa8072 ; padding: 10px; border-radius: 10px; background: #e9967a ;">ここに文章を記載する</div>

●タイトル付きの枠

画像42

<div><span style="background: #ff8c00 ; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff ; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div><div style="padding: 10px; border-radius: 5px; border: 2px solid #ff8c00 ;">囲み内の文章</div>

●タイトル付きの枠

画像43

<div style="height: 12px;"><span style="background: #f08080 ; padding: 6px 10px; border-radius: 5px; color: #ffffff ; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div><div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #f08080 ;">囲み内の文章</div>

●タイトル付きの枠

画像44

<div style="display: inline-block; background: #3399ff ; padding: 5px 10px; color: #ffffff ;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffff ; padding: 10px; border: 2px solid #3399ff ;">囲み内に文章を入れる</div>

●タイトル付きの枠

画像45

<div style="display: inline-block; background: #F7ED11 ; padding: 5px 10px; color: #ffffff ;"><strong>見出しタイトル</strong></div>
<div style="background: F7ED11; padding: 10px; border: 2px solid #F7ED11 ;">囲み枠内に文章を入れる</div>

●太線のタイトル付きの枠

画像53

<div>
<div style="height: 15px;"><span style="background: #C1C1C1 ; padding: 10px 10px; border-radius: 10px; color: #ffffff ; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 8px solid #C1C1C1 ;">
<p><span style="font-size: 16px;">囲み内の文章</span></p>
</div>
</div>

コードをコピーする時は、コード内の【　”　】のマークが【　”　】になっているか確認お願いします。上の【”】は半角、【“】は全角です。
微妙な違いですが、全角の場合、上手く囲み枠を作成する事ができません。
そのため、しっかりと張り付けたあとに、半角になっているか必ず確認するようお願いします。

●●●●囲み枠の色を変更する方法●●●●
枠のスタイルが決まったら、次に枠の色を変えたい。という方もいるでしょう。

そんな時も簡単に色を変更する事ができますので、ぜひやってみてくださいね＾＾

例えば、オレンジ枠の色を、赤に変更したい。と思った場合の方法についてお伝えします。
（ちなみに赤だけではなく、どんな色にも変更が可能です。）

では、さっそくいってみましょう。まずは、黄色マーカー部分に注目してください。

画像46

<div style=”border:5px solid #F90 ;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

上のコードをそのまま貼りつけコピーすると、オレンジ色の枠ができます。

しかし、これを赤の枠に変更したいと思っていたとすると、、、、#以降の色を変更するだけです。

画像47

それだけで、色の変更ができます。

カラーコードの調べ方は、サイトで紹介しているので、確認してみてください。

なので、使用するスタイルが決まっていれば、あとは黄色マーカー部分の色（コード）を変更すれば、カラーが変更できる。という事になります。

●●●●枠線の太さ、角の丸みの大きさ、余白の間隔、を変更する方法●●●●

次に、枠線の太さや、角の丸みの大きさ、余白の間隔を変更する方法について紹介します。

画像48

こんな枠をこんな枠に変更したい。

画像50

そんな時、どうするか？？？

画像49

●●●●ショートコードで呼び出しを楽にする方法●●●●

わたしの記事でAddQuicktag。という記事があるので、確認をお願いします。
これは、WordPressのプラグインの一つで、コードを登録するだけで、一発で、囲み枠などを表示できる優れものです。

ホーム
タイトルとURLをコピーしました