【アメブロ】HTML・CSSで作る囲み枠を全10種類ご紹介

この記事ではアメブロで設置できるHTML・CSSの囲み枠をご紹介していきます。

アメブロではCSSを活用しておしゃれで綺麗な囲み枠（枠線）を設置することが可能です。囲み枠を設置することで注目してほしい部分を目立たせることができますのでメリットが大きいと言えます。囲み枠をまだ設置したいない方はぜひ導入してみることをおすすめします。

1 アメブロで囲み枠を挿入する方法
2 囲み枠のコード【一覧】
3 まとめ

アメブロで囲み枠を挿入する方法

アメブロで囲み枠を挿入する方法としては、下記の３ステップにて行うことが可能です。

【囲み枠を挿入する手順】

アメブロテンプレートでカスタム可能なデザインを設定
CSSコードを指定箇所にコピペ
記事作成時に挿入したい部分にHTMLコードを貼り付け

アメブロテンプレートでカスタム可能なデザインを設定

アメブロでCSSに任意のコードを適応するためにはカスタム可能なデザインを選択する必要があります。具体的には以下の手順に従って、カスタム可能なデザインを選択してください。

カスタム可能なデザインは2022年3月時点で34種類ありますので、この中から選択することになります。なお、カスタム可能なデザイン以外を選択した場合にはCSSを編集することができませんので、下記でご紹介しているコードを貼り付けることができません。

【カスタム可能なデザインの設定方法】

アメブロへログイン
ブログ管理を開く
「デザインの設定」をクリック
カテゴリより「カスタム可能」なデザインを選択
「表示を確認する」をクリック
「適応する」をクリック
完了

関連記事【アメブロ】３種類のデザイン設定を徹底解説

2022.02.01

CSSコードを指定箇所にコピペ

次に下記に記載のCSSコードを指定箇所に貼り付けます。具体的な手順は以下の通りです。

【CSSを貼り付ける手順】

アメブロ管理画面を開く
デザインの設定をクリック
適応中のデザイン箇所より「CSSの編集」をクリック
一番下にスクロールし下記のCSSコードをを貼り付ける
「保存」をクリックし完了

記事作成時に挿入したい部分にHTMLコードを貼り付け

記事作成時に任意の位置に囲い枠を挿入する時に、HTMLコードを貼り付けます。具体的な手順は以下の通りとなります。

【HTMLを貼り付ける手順】

アメブロ管理画面を開く
「ブログを書く」をクリック
「HTML表示」に切り替える
HTMLコードを貼り付ける
枠線内に任意のテキストを入力
投稿して完了

囲み枠のコード【一覧】

シンプルな囲み枠

<div class="sample-box01">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box01 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 2px #000;
}
.sample-box01 p {
margin: 0;
padding: 0;
}

丸みがある囲み枠

<div class="sample-box02">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box02 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #4c9c49;
background: #FFF;
border: solid 2px #4c9c49;
border-radius: 15px;
}
.sample-box02 p {
margin: 0;
padding: 0;
}

背景色を付けた囲み枠（文字色：黒）

<div class="sample-box03">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box03 {
padding: 0.5em 1em;
margin: 2em 0;
color: #000;
background: #84d37f
}
.sample-box03 p {
margin: 0;
padding: 0;
}

背景色を付けた囲み枠（文字色：白）

<div class="sample-box04">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box04 {
padding: 0.5em 1em;
margin: 2em 0;
color: #FFF;
background: #115e1b
}
.sample-box04 p {
margin: 0;
padding: 0;
}

上に太い線の囲い枠

<div class="sample-box05">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box05 {
padding: 10px 20px;
margin: 2em 0;
color: #000;
background: #bff5c7;
border-top: solid 5px #2ca33c;
}
.sample-box05 p {
margin: 0;
padding: 0;
}

下に太い線の囲い枠

<div class="sample-box06">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box06 {
padding: 10px 20px;
margin: 2em 0;
color: #000;
background: #bff5c7;
border-bottom: solid 5px #2ca33c;
}
.sample-box06 p {
margin: 0;
padding: 0;
}

上下に太い線の囲い枠

<div class="sample-box07">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box07 {
padding: 10px 20px;
margin: 2em 0;
color: #000;
background: #bff5c7;
border-top: solid 5px #2ca33c;
border-bottom: solid 5px #2ca33c;
}
.sample-box07 p {
margin: 0;
padding: 0;
}

二重線の囲い枠

<div class="sample-box08">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box08 {
padding: 1em 1em;
margin: 2em 0;
border: double 5px #2ca33c;
}
.sample-box08 p {
margin: 0;
padding: 0;
}

左右が二重線の枠

<div class="sample-box10">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box9 {
padding: 0.5em 1em;
margin: 2em 0;
color: #474747;
background: #f0f0f0;
border-left: double 7px #2ca33c;
border-right: double 7px #2ca33c;
}
.sample-box09 p {
margin: 0;
padding: 0;
}

上下が二重線の枠

<div class="sample-box10">
<p>ここにテキストを入れるることが可能です</p>
</div>

.sample-box10 {
padding: 0.5em 1em;
margin: 2em 0;
color: #474747;
background: #f0f0f0;
border-top: double 5px #2ca33c;
border-bottom: double 5px #2ca33c;
}
.sample-box09 p {
margin: 0;
padding: 0;
}

アメブロで囲み枠を利用することで、ブログ自体の質を上げる事が可能です。コードを挿入するだけですぐに使えるものとなっていますので、アメブロ初心者の方でもおすすめのカスタマイズとなっています。

具体的な利用方法としては、メルマガの登録や自社サービスのメニュー表示、自社サイトへの誘導などに利用できるでしょう。