ブログやワードプレスで記事を書くときに、飾りの枠線を使いたい。

だって、目を引くんだもん。
だって、可愛いんだもん。
だって、情報を整理したいんだもんっ
(*´ェ`*)

そんなときに簡単に、コピペだけで使うことができるデザインのサンプルをご紹介いたします。

※記載の情報は現時点での情報となります。変更など生じる場合、その他自己責任でご利用ください。
また、不明な点がありましたら、コメントいただければお返事または別の記事でお答えさせていただくかもしれません。

使い方(ワードプレス向け)

1.飾り枠を入れたい部分にHTMLコードをコピペ

まずは、記事内の、飾り枠を挿入したい部分にHTMLコードを貼り付ける。
その際、HTMLで編集ができるモードに(タブをクリックして切り替えるなど)したうえで、が重要です。(下記参照)

  • WordPressの場合
    テキスト(ビジュアルではなく)

2.CSSをコピペ

使いたいデザインのCSSコードをコピー。
そちらをブログやワードプレスのCSSファイル(場所は下記参照ください)に貼り付ける。
すでに色々とコード(暗号のようなもの)が記載されていると思うので、それらを一文字も消さないように気をつけて、一番下に貼り付けるので大丈夫です。

  • WordPressの場合
    ダッシュボード > 外観 > テーマの編集 > 右側のバーの「Style.css」

使い方(アメブロ向け)

上記の使い方が一般的なのですが、アメブロの場合は上記の場合スマホ閲覧時には枠線が表示されません。
ので、こちらの使い方が良いです。ただし、一部のデザインは用意できないのであるものだけでご利用くださいね。

1.飾り枠を入れたい部分にアメブロ用HTMLコードをコピペ。以上!

アメブロ用に別途コードを作りました。それぞれのデザイン、各コードの一番下に用意してあります。
アメブロ用HTMLコード
だけをコピーして、飾り枠を入れたい記事の部分に貼り付けてください。

それでは、ここからはデザインサンプルのご紹介です。ご自由にお使いください。

シンプルな飾り枠

1.実線で囲んだだけの究極のシンプル

こんな枠。
シンプルに。軽く目立たせたい(どっちやねん)ときに。どんなサイトでも使えるオールマイティーさんです。実線の色を変えたり、太さを変えたり。

▼ HTMLコード

<div class="sample_box1">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box1 {
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 2px #000000;/*線*/
}
.sample_box1 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;border: solid 2px #000000;">
    <p>ここに文字を入力</p>
</div>
ちなみに、CSSコードの2pxの数値を変えると線の太さが変わるよ。
5pxとか1pxとかね。

2.繊細な二重線

こんな枠。
女子が好きそうなピンク色を使って細めの二重線に。

▼ HTMLコード

<div class="sample_box2">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2 {
    padding: 1em 1.5em;
    margin: 2em 0;
    border: double 4px #ff69b4;/*線*/
}
.sample_box2 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;border: double 4px #ff69b4;">
    <p>ここに文字を入力</p>
</div>

3.背景に色を

こんな枠。
背景に色があるだけでも、目立つし、情報の整理にも使えますね。

▼ HTMLコード

<div class="sample_box3">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box3 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#b0e0e6;/*背景色*/
    color:#000000;/*文字色*/
}
.sample_box3 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b0e0e6;color:#000000;">
    <p>ここに文字を入力</p>
</div>

4.破線

こんな枠。
枠線を破線に。背景や線の色、また線の太さを変えるだけで色んな表情になりますよん。

▼ HTMLコード

<div class="sample_box4">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box4 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#fff0f5;/*背景色*/
    border: dashed 2px #773d50;/*線*/
    color:#000000;/*文字色*/
}
.sample_box4 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border: dashed 2px #773d50;color:#000000;">
    <p>ここに文字を入力</p>
</div>

5.ドット

こんな枠。
破線は破線でも、ドットに。可愛らしくなりますね。こちらも線の太さを変えると表情が変わります。お試しを。

▼ HTMLコード

<div class="sample_box5">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box5 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#ffffe0;/*背景色*/
    border: dotted 6px #ffa500;/*線*/
    color:#000000;/*文字色*/
}
.sample_box5 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#ffffe0;border: dotted 6px #ffa500;color:#000000;">
    <p>ここに文字を入力</p>
</div>

6.付箋のように左側にライン

こんな枠。
ラインが入るだけで、目にとまりやすくなりますね。ちなみに抹茶が大好きなので、無駄に抹茶カラーにしてみましたん。

▼ HTMLコード

<div class="sample_box6">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box6 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f6faee;/*背景色*/
    border-left: solid 10px #6b8e23;/*左ライン*/
    color:#000000;/*文字色*/
}
.sample_box6 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f6faee;border-left: solid 10px #6b8e23;color:#000000;">
    <p>ここに文字を入力</p>
</div>

7.まあるく丸く

こんな枠。
実線を丸くするだけで、優しい雰囲気。背景や線の色を変えて楽しんでね。

▼ HTMLコード

<div class="sample_box7">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box7 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#fff0f5;/*背景色*/
    border:1px solid #9370db;/*線*/
    color:#000000;/*文字色*/
    border-radius: 10px;/*角の丸み*/
}
.sample_box7 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border:1px solid #9370db;color:#000000;border-radius: 10px;">
    <p>ここに文字を入力</p>
</div>
「角の丸み」の10pxの数値を増減させると、角の丸み具合が変化します。楽しんでみてね。

8.影をつけて立体的に

こんな枠。
立体的になってより他の情報と区別をつけられますね。ここぞというときに使ってみてください。

▼ HTMLコード

<div class="sample_box8">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box8 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f4f9ff;/*背景色*/
    border:1px solid #84c1ff;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
}
.sample_box8 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f4f9ff;border:1px solid #84c1ff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);color:#000000;">
    <p>ここに文字を入力</p>
</div>

9.背景色を濃く、文字を白抜きに

こんな枠。
背景色を濃くすれば、文字色を白くして可読性を保ったままデザインできます。ただ、目にインパクトがあるので多用しすぎず、効果的にお使いください。

▼ HTMLコード

<div class="sample_box9">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box9 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#b22222;/*背景色*/
    color:#ffffff;/*文字色*/
    font-weight:bold;
}
.sample_box9 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b22222;color:#ffffff;font-weight:bold;">
    <p>ここに文字を入力</p>
</div>

10.かっちりビジネスサイト風

こんな枠。
グレーのグラデーションをかけたこういう枠線はビジネスサイトによく見かけます。

▼ HTMLコード

<div class="sample_box10">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box10 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background: linear-gradient(to bottom, #ffffff, #eeeeee);/*背景色*/
    background: -webkit-linear-gradient(top, #fffff, #eeeeee);/*背景色*/
    border: 1px solid #eeeeee;/*枠線*/
    border-top: 4px solid #00008b;/*上の線*/
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
    color:#000000;/*文字色*/
}
.sample_box10 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background: linear-gradient(to bottom, #ffffff, #eeeeee);background: -webkit-linear-gradient(top, #fffff, #eeeeee);border: 1px solid #eeeeee;border-top: 4px solid #00008b;box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;color:#000000;">
    <p>ここに文字を入力</p>
</div>

可愛い飾り枠

1.斜めのストライプ

こんな枠。
CUTEなサイトはもちろん、色を変えれば男性向けのサイトでも使えるかもですね。(あ、でもそれなら下のデザインの方がいいかな)文字色もストライプに合わせて可愛い色にしています。

▼ HTMLコード

<div class="sample_box2_1">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_1 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #4f274f;/*文字色*/
}
.sample_box2_1 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background: -webkit-repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);background: repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);color: #4f274f;">
    <p>ここに文字を入力</p>
</div>
「ストライプ」には#から始まるカラーコードが4つありますよね。今回は、最初の二つがピンク。その後ろの二つが白色です。変えてみて変化を楽しんでみてね。「ストライプ」は2行あります。どちらも同じ色で設定してね。

2.もう少し控えめなストライプ

こんな枠。
先ほどのストライプよりも少し幅と色を変えて、控えめにしました。青色の効果もあって、さわやか〜

▼ HTMLコード

<div class="sample_box2_2">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_2 {
    padding: 1em 1.5em;
    margin: 2em 0;
   background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);/*ストライプ*/
    color: #000000;/*文字色*/
}
.sample_box2_2 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);color: #000000;">
    <p>ここに文字を入力</p>
</div>

3.ステッチ風

こんな枠。
布にステッチしたようなデザイン。白い糸で縫い縫い・・・っていうね。

▼ HTMLコード

<div class="sample_box2_3">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_3 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffc6c6;/*背景色*/
    box-shadow: 0 0 0 8px #ffc6c6;/*背景色外側*/
    border: 2px dashed #ffffff;/*線*/
    color: #000000;/*文字色*/
}
.sample_box2_3 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="width:90%;padding: 1em 1.5em;margin: 2em auto;background-color: #ffc6c6;box-shadow: 0 0 0 8px #ffc6c6;border: 2px dashed #ffffff;color: #000000;">
    <p>ここに文字を入力</p>
</div>

4.ステッチ風で丸く

こんな枠。
先ほどのステッチ風を角丸に。そして、ステッチにも色をつけました。かわいいー!

▼ HTMLコード

<div class="sample_box2_4">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_4 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #fff4ea;/*背景色*/
    box-shadow: 0 0 0 8px #fff4ea;/*背景色外側*/
    border: 2px dashed #ffbf7f;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.sample_box2_4 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="width:90%;padding: 1em 1.5em;margin: 2em auto;background-color: #fff4ea;box-shadow: 0 0 0 8px #fff4ea;border: 2px dashed #ffbf7f;border-radius: 8px;color: #000000;">
    <p>ここに文字を入力</p>
</div>

5.版ズレしたようなデザイン

こんな枠。
背景色を少しずらしたデザイン。

▼ HTMLコード

<div class="sample_box2_5">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_5 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffffff;/*背景色*/
    color: #000000;/*文字色*/
    z-index: 1;
}
.sample_box2_5::before,
.sample_box2_5::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sample_box2_5::before {
    background-color: rgba(255, 255, 255, 0.2);
    left: 0;
    top: 0;
    z-index: -1;
}
.sample_box2_5::after {
    background-color: #ffffc6;/*ズレている方の背景色*/
    top: 5px;
    left: 5px;
    z-index: -2;
}
.sample_box2_5 p {
    margin: 0; 
    padding: 0;
}

6.カラフルに版ズレ

こんな枠。
カラフルに版ズレ。あんまり使わないかな?(笑)さくらもちみたいで好きです。

▼ HTMLコード

<div class="sample_box2_6">
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box2_6 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffffff;/*背景色*/
    color: #000000;/*文字色*/
    z-index: 1;
}
.sample_box2_6::before,
.sample_box2_6::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.sample_box2_6::before {
    background-color: rgba(255, 219, 255, 0.6);
    left: 0;
    top: 0;
    z-index: -1;
}
.sample_box2_6::after {
    background-color: #edffdb;/*ズレている方の背景色*/
    top: 5px;
    left: 5px;
    z-index: -2;
}
.sample_box2_6 p {
    margin: 0; 
    padding: 0;
}

タイトル付きの飾り枠

1.枠始まりにタイトル

CHECK!

こんな枠。
タイトルには「POINT!」とか「おすすめ!」とか適宜変えてくださいね。

▼ HTMLコード

<div class="sample_box3_1">
    <span class="sample_box_title">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box3_1 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 3px #c71585;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.sample_box3_1 .sample_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #c71585;/*タイトル文字色*/
    font-weight: bold;
}
.sample_box3_1 p {
    margin: 0; 
    padding: 0;
}

アメブロ用HTMLコード

<div style="position: relative;padding: 1em 1.5em;margin: 2em 0;border: solid 3px #c71585;border-radius: 8px;color: #000000;/">
    <span style="position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 10px;line-height: 1;font-size: 1.3em;background: #ffffff;color: #c71585;font-weight: bold;">ここにタイトルを入力</span>
    <p>ここに文字を入力</p>
</div>

2.上部に横いっぱいタイトル

CHECK!

こんな枠。
タイトルに隠し技で同系色の下線をひいてあります。色々と色を変えてサイトにぴったりなデザインにしてみてくださいね。

▼ HTMLコード

<div class="sample_box3_2">
    <div class="sample_box_title">ここにタイトルを入力</div>
    <p>ここに文字を入力</p>
</div>

▼ CSSコード

.sample_box3_2 {
    margin: 2em 0;
    background: #fff2e4;/*背景色*/
    color: #000000;/*文字色*/
}
.sample_box3_2 .sample_box_title{ 
    padding: 0.5em 0.5em 0.4em;
    text-align: center;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #ff9b38;/*タイトル文字背景色*/
    border-bottom: 3px solid #ff7f00;/*タイトル下線*/
    color: #ffffff;/*タイトル文字色*/
    font-weight: bold;
    letter-spacing: 0.05em;
}
.sample_box3_2 p {
    padding: 1em 1.5em;
}

アメブロ用HTMLコード

<div style="margin: 2em 0;background: #fff2e4;color: #000000;">
    <div style="padding: 0.5em 0.5em 0.4em;text-align: center;font-size: 1.3em;background: #ff9b38;border-bottom: 3px solid #ff7f00;color: #ffffff;font-weight: bold;letter-spacing: 0.05em;">ここにタイトルを入力</div>
    <p style="padding: 1em 1.5em;">ここに文字を入力</p>
</div>

【応用編】色を変える方法

そそそそそして。ちょっと上級ですが。

色はCSSコードの中の # から始まる6桁の英数字。
ここを変えることで色が変わります。

下記のようなサイトから希望の色のカラーコードを調べて、差し替えるだけで色を変えられます。

▼HTMLカラーチャート(外部サイト)
https://html-color-codes.info/japanese/

もしくはこういったサイトから「あ。好き!」という色のカラーコードに差し替えたり。

▼WEB色見本 原色大辞典(外部サイト)
https://www.colordic.org/

「あ、なんだか意味がわかった!できそう!」という方は、ぜひ挑戦してみてください。

LINE@では最新のお知らせやつぶやきを不定期配信中
友だち追加

SNSアカウントを使ってもコメントができますので、ぜひぜひ。