文章を枠で囲む コード「囲み枠メモ」コピペでOK【まとめ】

このページでは、
ブログ記事の文章を、枠で囲みたい場合に使用する コード を記載しています。

注意文や、内部リンクなど、
通常の文章より目立たせたい場合にオススメです。

また、すべての枠下に html コードを記載しているので、
コピー&ペーストだけで利用可能です。

※枠線の色、背景色（#○○○○○○;）は、好みに合わせて変更してください。

カラーコードはコチラから↓

フォントカラーなど、html「カラーコード」メモ

フォントカラー、背景色といった、個人的に多用しそうな「カラーコード」をメモとして記載しています。#ff0000 #ff4949 #ffa0a0 #ffdddd #ff9900 #ffb342 #ffcd82 #ffedd6 #ffff00 #ffff4f #ffff87 #ffffd3…

business087.com

WordPress のブログ内で多用する場合は AddQuicktag を利用しましょう。

AddQuicktag コードや固定文をボタン一つで挿入する

WordPress のブログ記事内に特定の html コードを挿入したい場合や、毎回一緒のリンク、固定文を挿入する場合など、一から作成していると面倒で時間が掛かります。そんな時に便利なのが「AddQuicktag」です。AddQuicktag は記事編集のツールバーに自分独自のボタンを作成できるプラグイン…

business087.com

細めの枠

<div style="padding: 8px; border: solid 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

<div style="padding: 8px; border: double 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠・二重線</div>

<div style="padding: 8px; border: dotted 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠・点線</div>

<div style="padding: 8px; border: dashed 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠・点線幅広め</div>

<div style="padding: 8px; border: none 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠・無し</div>

細めの枠 + 太い線

<div style="padding: 8px; border: solid 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

<div style="padding: 8px; border: double 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線・二重線</div>

<div style="padding: 8px; border: dotted 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線・点線</div>

<div style="padding: 8px; border: dashed 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線・点線幅広め</div>

太めの枠

<div style="padding: 16px; border: solid 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠</div>

<div style="padding: 16px; border: double 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠・二重線</div>

<div style="padding: 16px; border: dotted 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠・点線</div>

<div style="padding: 16px; border: dashed 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠・点線幅広め</div>

<div style="padding: 16px; border: none 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠・無し</div>

太めの枠 + 太い線

<div style="padding: 16px; border: solid 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 太い線</div>

<div style="padding: 16px; border: double 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 太い線・二重線</div>

<div style="padding: 16px; border: dotted 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 太い線・点線</div>

<div style="padding: 16px; border: dashed 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 太い線・点線幅広め</div>

細めの枠 + 丸角

<div style="padding: 8px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

<div style="padding: 8px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角・二重線</div>

<div style="padding: 8px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角・点線</div>

<div style="padding: 8px; border: dashed 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角・点線幅広め</div>

<div style="padding: 8px; border: none 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角・無し</div>

細めの枠 + 丸角 + 太い線

<div style="padding: 8px; border: solid 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角 + 太い線</div>

<div style="padding: 8px; border: double 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角 + 太い線・二重線</div>

<div style="padding: 8px; border: dotted 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角 + 太い線・点線</div>

<div style="padding: 8px; border: dashed 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角 + 太い線・点線幅広め</div>

太めの枠 + 丸角

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角</div>

<div style="padding: 16px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角・二重線</div>

<div style="padding: 16px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角・点線</div>

<div style="padding: 16px; border: dashed 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角・点線幅広め</div>

<div style="padding: 16px; border: none 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角・無し</div>

太めの枠 + 丸角 + 太い線

<div style="padding: 16px; border: solid 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角 + 太い線</div>

<div style="padding: 16px; border: double 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角 + 太い線・二重線</div>

<div style="padding: 16px; border: dotted 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角 + 太い線・点線</div>

<div style="padding: 16px; border: dashed 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">太めの枠 + 丸角 + 太い線・点線幅広め</div>

枠に影をつけたい場合

枠に影をつけたい場合は、
【 box-shadow: 5px 5px 1px #999999; 】を追加しましょう。

<div style="padding: 8px; border: solid 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px; box-shadow: 5px 5px 1px #999999;">細めの枠 + box-shadow: 5px 5px 1px #999999;</div>

<div style="padding: 16px; border: double 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px; box-shadow: 5px 5px 1px #999999;">ここに文章を入力します。</div>

影をもっとぼかしたい場合は【 1px 】を変更しましょう。

<div style="padding: 8px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px; box-shadow: 5px 5px 10px#999999;">box-shadow: 5px 5px 10px #999999; を指定した場合。</div>

<div style="padding: 16px; border: solid 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px; box-shadow: 5px 5px 20px #999999;">box-shadow: 5px 5px 20px #999999; を指定した場合。</div>

枠上下の余白（幅）を指定

上記の枠は全て見やすいように
【 margin-top: 30px; margin-bottom: 30px; 】を指定しています。
margin-top: 30px; margin-bottom: 30px; は、枠上下の余白幅を指定しています。

両方 30 の場合↓、枠と文章の間は広めですが、

ここの上下の枠は margin-top: 30px; margin-bottom: 30px; を指定しています。

margin-top: 30px; margin-bottom: 30px; の数字を小さくすると、
枠と文章の間が狭くなります。

ここの上下の枠は margin-top: 5px; margin-bottom: 5px; を指定しています。

margin-top: 30px; margin-bottom: 30px; は、好みに合わせて指定してください。
※枠線の色、背景色（#○○○○○○;）は、好みに合わせて変更してください。

カラーコードはコチラから↓

フォントカラーなど、html「カラーコード」メモ

フォントカラー、背景色といった、個人的に多用しそうな「カラーコード」をメモとして記載しています。#ff0000 #ff4949 #ffa0a0 #ffdddd #ff9900 #ffb342 #ffcd82 #ffedd6 #ffff00 #ffff4f #ffff87 #ffffd3…

business087.com

WordPressのブログ内で多用する場合は AddQuicktag を利用しましょう。

AddQuicktag コードや固定文をボタン一つで挿入する

WordPress のブログ記事内に特定の html コードを挿入したい場合や、毎回一緒のリンク、固定文を挿入する場合など、一から作成していると面倒で時間が掛かります。そんな時に便利なのが「AddQuicktag」です。AddQuicktag は記事編集のツールバーに自分独自のボタンを作成できるプラグイン…

business087.com