【HTML+CSS】おしゃれな飾り囲み枠（ボックス）デザイン！ブログやWordPressにコピペ：CSS使わずHTMLコードだけでもOK

2018-06-052024-05-11

見出し（Hタグ）デザインを別ページでご紹介！ぜひ「囲み枠+見出し」セットでデザインしてみてください。（2020年7月20日）

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

だって、目を引くんだもん 🙂
だって、可愛いんだもん 🙂
だって、情報を整理したいんだもんっ 🙂

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

使い方

WordPressの場合：CSS+HTMLコード

STEP

「CSSコード」をコピペ

使いたいデザインのCSSコードをコピー。それをワードプレスのCSSファイル（下記参照）に貼り付ける。

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

すでに色々とコード（暗号みたいなもの）が記載されていると思うので、それらを一文字も消さないように気をつけてくださいね。一番下に貼り付けるので大丈夫です。

これで、デザインが入りました。

STEP

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

記事内の、飾り枠を挿入したい部分にHTMLコードを貼り付ける。
その際、「HTMLで編集ができるモード（下記参照）に切り替えてから貼り付ける」が重要です。

WordPressのブロックエディタの場合
カスタムHTML

WordPressの旧エディタの場合
テキスト（ビジュアルではなく）

STEP

+α 「再利用ブロックに追加」で次回からスムーズ

WordPressのブロックエディタの場合は、STEP2のHTMLを「再利用ブロックに追加」してしまうと楽です。

アメブロの場合：HTMLコードのみ

アメブロの場合、上記のやり方ではスマホ閲覧時に　デザイン（飾り枠）が表示されません。

ですので、こちらのやり方をオススメします。ただし、ご用意できないデザインもあります。

アメブロだけでなく、WordPressでもこちらのやり方可能です。「HTMLで編集ができるモード」に切り替えてから、アメブロ用HTMLコードを貼り付ける、でOKです。

STEP

飾り枠を入れたい部分に「アメブロ用HTMLコード」をコピペ

アメブロ用に別途コードを作りました。それぞれのデザインの、各コードの一番下に用意してあります。

▼アメブロ用HTMLコード

だけをコピーして、飾り枠を入れたい記事の部分に貼り付けてください。

アメブロでの使い方手順は、以上です。

飾り枠デザイン

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

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

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

▼ 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とかね。

繊細な二重線

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

▼ 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>

背景に色を

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

▼ 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>

破線

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

▼ 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>

ドットの破線

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

▼ 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>

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

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

▼ 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>

まあるく丸く

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

▼ 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の数値を増減させると、角の丸み具合が変化します。

影をつけて立体的に

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

▼ 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>

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

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

▼ 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;
}

▼ アメブロ用コード

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

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

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

▼ 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>

【目を引く】セロハンテープでぺたり

WOW！

わぉ

思わず目に止まる！画像と思いきやHTML+CSS！これは使いたくなーる♪ なーる♪

▼ HTMLコード

<div class="sample_box11">
<div class="sample_box11_tape"> </div>
<p class="sample_box11_title">タイトル</p>
<p class="sample_box11_subtitle">サブタイトル</p><p>ここに文字を入力テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

▼ CSSコード

.sample_box11 {
   width: 260px;/* 紙の横幅 100%にすると全幅表示に */
   padding: 15px;
   margin: 2em auto;
   background: #f7f092;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
   word-break: break-all;
}
.sample_box11 p {
    margin: 0; 
    padding: 0;
    font-size: 0.9em;
}
.sample_box11_tape {
    width: 50%;
    height: 35px;
    margin: -25px auto 0;
    background: #989898;
    transform: rotate(-3deg);
    opacity: 0.1;
}
.sample_box11_title {
    text-align: center;
    font-size: 1.3em!important;
    margin-top: 10px!important;
}
.sample_box11_subtitle {
    text-align: center;
    font-size: 0.7em!important;
    margin-bottom: 1em!important;
}

▼ アメブロ用HTMLコード

<div style="width: 260px;padding: 15px;margin: 2em auto;background: #f7f092;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #989898;transform: rotate(-3deg);opacity: 0.1;"> </div>
    <p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p> 
    <p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p><p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力テキストテキストテキストテキスト</p>
</div>

【目を引く】色テープでぺたり

CUTE

キュート

さきほどのを少し変えたバージョン。紙の色を変えて、色付きのテープでぺたり。

▼ HTMLコード

<div class="sample_box12">
<div class="sample_box12_tape"> </div>
<p class="sample_box12_title">タイトル</p>
<p class="sample_box12_subtitle">サブタイトル</p><p>ここに文字を入力テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

▼ CSSコード

.sample_box12 {
   width: 260px;/* 紙の横幅 100%にすると全幅表示に */
   padding: 15px;
   margin: 2em auto;
   background: #fbc7f5;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
   word-break: break-all;
}
.sample_box12 p {
    margin: 0; 
    padding: 0;
    font-size: 0.9em;
}
.sample_box12_tape {
    width: 50%;
    height: 35px;
    margin: -25px auto 0;
    background: rgba(251, 234, 144, 0.5);/* テープの色 */
    transform: rotate(-3deg);
    opacity: 0.9;
}
.sample_box12_title {
    text-align: center;
    font-size: 1.3em!important;
    margin-top: 10px!important;
}
.sample_box12_subtitle {
    text-align: center;
    font-size: 0.7em!important;
    margin-bottom: 1em!important;
}

▼ アメブロ用HTMLコード

<div style="width: 260px;padding: 15px;margin: 2em auto;background: #fbc7f5;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: rgba(251, 234, 144, 0.5);transform: rotate(-3deg);opacity: 0.9;"> </div>
    <p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p> 
    <p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p><p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力テキストテキストテキストテキスト</p>
</div>

NEW!【可愛い】爽やかな白いドット

こんな枠。
爽やかな水色を背景にして、ドットだけれど甘くなりすぎない♪

▼ HTMLコード

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

▼ CSSコード

.sample_box13 {
padding: 1em 1.5em;
margin: 2em 0;  
background: #ddf2fa;/*背景色*/
background-image: radial-gradient(#fff 10%, transparent 15%), radial-gradient(#fff 10%, transparent 15%);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color:#333;/*文字色*/
}

▼ アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background: #ddf2fa;background-image: radial-gradient(#fff 10%, transparent 15%), radial-gradient(#fff 10%, transparent 15%);background-position: 0 0, 10px 10px;background-size: 20px 20px;color:#333;">
    <p>ここに文字を入力</p>
</div>

背景色の、#から始まるカラーコード6桁。

今回は水色ですが、ここを変えると他の色に出来ます。背景色が変わると印象が大きく変わるので、レッツチャレンジ！ ※カラーコードの変え方はこちら

NEW!【可愛い】ピンクな白いドット

こんな枠。
ドット自体をピンクにして、背景も薄ピンクにして、CUTEに。

▼ HTMLコード

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

▼ CSSコード

.sample_box14 {
padding: 1em 1.5em;
margin: 2em 0;
background: #ffebf0;/*背景色*/
background-image: radial-gradient(#fad6de 10%, transparent 25%), radial-gradient(#fad6de 10%, transparent 25%);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color:#333;/*文字色*/
}

▼ アメブロ用HTMLコード

<div style="padding: 1em 1.5em;margin: 2em 0;background: #ffebf0;background-image: radial-gradient(#fad6de 10%, transparent 25%), radial-gradient(#fad6de 10%, transparent 25%);background-position: 0 0, 10px 10px;background-size: 20px 20px;color:#333;/*文字色*/">
    <p>ここに文字を入力</p>
</div>

【可愛い】斜めのストライプ

こんな枠。
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行あります。どちらも同じ色で設定してね。

【可愛い】少し控えめなストライプ

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

▼ 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>

【可愛い】ステッチ風

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

▼ 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>

【可愛い】ステッチ風で丸く

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

▼ 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>

【可愛い】版ズレしたようなデザイン

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

▼ 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;
}

【可愛い】カラフルに版ズレ

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

▼ 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;
}

【タイトル付】枠始まりにタイトル

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>

【タイトル付】上部に横いっぱいタイトル

CHECK!

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

▼ HTMLコード

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

▼ CSSコード

.sample_box3_2 {
    margin-top: 0;
    padding: 1em 1.5em;
    background: #fff2e4;/*背景色*/
    color: #000000;/*文字色*/
}
.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_box_title p {
    margin-bottom: 0;
}

▼ アメブロ用HTMLコード

<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;"><p>ここにタイトルを入力</p></div>
<div style="padding: 1em 1.5em;margin: 0;background: #fff2e4;color: #000000;"><p>ここに文字を入力</p>
</div>

応用編：色を変える方法

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

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

例）#ffffff　→　ffffffを変える

必ず半角で。全角になっているとエラーになります。

カラーコードの調べ方は

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

動画で解説プチ講座

色の変え方も含めて、下記のカスタマイズ方法を動画内で解説しています。

シンプルな破線をカスタマイズ！
背景色の変える
線の色を変える
線の種類を変える
線の幅を変える
文字色を変える

まとめ

また、随時、デザインを更新していきますね。

ぜひ、見出し（Hタグ）デザインと併せて

下記では、同じように、HTML+CSSでできる見出し（Hタグ）デザインをご紹介中です。こちらの囲み枠デザインと併せて、あなたのブログやWordPressをさらにレベルUP！！

マンツーマンでのサポートは

「やってみたけれどもう一歩のところで失敗する……」「もっとここをこうしたい！」といったご相談や「もっとブログを素敵にしたい！」etc の個別相談は、パーソナルコンサルティングでお受けしています。

URLをコピーしました！

著者プロフィール

YUKI

WEBサイトデザイン制作 / 認定SEOコンサル / コピーライティング
POPPYOU 代表YUKI
WEB集客する経営者さん（起業家・中小企業）をサポートしています。メルマガもよければお気軽にご登録くださいね。

COMMENT

コメント一覧（4件）

gra8arui より:

2019-11-14 1:50 PM

初めまして！WordPressにてファッションメディアを運営しているRuiと申します♫

目次を作成するのに大変ありがたい記事で感謝しております。
操作もわかりやすくすぐに腑に落ちました⭐️

ただ1つ疑問なのですが、アメブロコードがないデザインもあり、この場合はどう実装するのでしょう？

返信
- poppyou より:
  
  2019-11-14 2:26 PM
  
  Ruiさん★
  
  初めまして。こうやって書き込んでくださりありがとうございます
  (*´ｪ`*)
  
  アメブロコードがないデザインは、ページ内に記載の下記のとおり、色々と事情があり（笑　CSSだけで表現するものがある場合はアメブロではできなくて。）掲載していません。
  
  ↓↓↓
  
  上記の使い方が一般的なのですが、アメブロの場合は上記の場合スマホ閲覧時には枠線が表示されません。
  ので、こちらの使い方が良いです。ただし、一部のデザインは用意できないのであるものだけでご利用くださいね。
  
  返信
  - rui777fw より:
    
    2019-11-14 2:39 PM
    
    迅速なご返信ありがとうございます♫
    
    なるほど。
    アメブロコードがないデザインをcssで実装するとPCでは枠線表示がされますがスマホでは表示されないと・・・
    
    つまりレスポンシブではないという解釈でお間違いないでしょうか？
    
    P.S
    Twitterとインスタフォローさせて頂きました！
    
    返信
    - poppyou より:
      
      2019-11-14 2:43 PM
      
      んーと・・
      
      アメブロはCSSを触れるテンプレートを使えばCSSを指定できるのですが、スマホは対象外なのですね。
      
      レスポンシブではない、ということではなく、アメブロはCSSを指定できるのはPC閲覧版時だけなのです。
      
      という事情から、CSSで指定しないと表現できない枠線デザインは、アメブロコードを用意していません＾＾
      
      説明が上手くなく伝わりにくかったらすみませんー（笑）
      
      p.s. ツイッター&インスタありがとうございます♪
      
      返信

【HTML+CSS】おしゃれな飾り囲み枠（ボックス）デザイン！ ブログやWordPressにコピペ：CSS使わずHTMLコードだけでもOK

使い方

WordPressの場合：CSS+HTMLコード

アメブロの場合：HTMLコードのみ

飾り枠デザイン

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

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

繊細な二重線

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

背景に色を

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

破線

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

ドットの破線

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

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

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

まあるく丸く

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

影をつけて立体的に

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

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

▼ HTMLコード

▼ CSSコード

▼ アメブロ用コード

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

▼ HTMLコード

▼ CSSコード

【目を引く】セロハンテープでぺたり

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【目を引く】色テープでぺたり

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

NEW!【可愛い】爽やかな白いドット

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

NEW!【可愛い】ピンクな白いドット

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【可愛い】斜めのストライプ

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【可愛い】少し控えめなストライプ

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【可愛い】ステッチ風

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【可愛い】ステッチ風で丸く

▼ HTMLコード

▼ CSSコード

▼ アメブロ用HTMLコード

【可愛い】版ズレしたようなデザイン

▼ HTMLコード

▼ CSSコード

【可愛い】カラフルに版ズレ

【HTML+CSS】おしゃれな飾り囲み枠（ボックス）デザイン！ブログやWordPressにコピペ：CSS使わずHTMLコードだけでもOK

コメント一覧（4件）