アメブロカスタマイズ コラム

コピペで使えるシンプルでおしゃれな囲み枠CSSサンプル

アメブロでのお知らせ、WordPressサイトでのまとめ、メルマガデザインなど、いろいろな場面で使える囲み枠のサンプルを作ってみました。コピペして活用してみてください。

シンプルな背景色での囲み枠

背景色だけで表現したシンプルだけど使いやすい囲み枠です。文字が見やすいよう淡い色を用意しました。

アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div style="padding:20px;width:80%;background:#FEDFE1;border-radius:8px;color:#724938">  
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br/>
枠の中には自由に文章を書きます。
</div>

上のコードをコピーしてから、囲み枠内の文章をお好みのものに変えて使ってみてください。背景色を変えるだけで、雰囲気が変わります。
background:#FEDFE1;部分で背景色を指定しています。ここのカラーコードをいろいろ変更してみましょう。

英語ですが、HTML Color Codesというサイトで色を一覧表示で探すことができます。ポイントとなる色が決まったら、相性のよい色の組み合わせも提案してくれる感覚的に使いやすい配色選びサイトです。

HTML Color Codes

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 背景色 by Yukari Kimura (@FITP) on CodePen.

二重線囲み枠

シンプルな二重線の囲み枠です。角を少しだけ丸めて優しさを出してます。

アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div class="blue" style="padding:20px;width:80%;border-width:4px;border-style:double;border-color:#85C1E9;border-radius:4px;color:#80888D;" >
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br />
枠の中には自由に文章を書きます。
</div>  

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 二重線 by Yukari Kimura (@FITP) on CodePen.

背景色+二重線囲み枠

アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div class="blue" style="padding: 20px;width: 80%;border: 6px double #85C1E9;border-radius: 4px;color: #80888D;background-color: #EAFAF1;">
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br>
枠の中には自由に文章を書きます。
</div>  

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 二重線+背景色 by Yukari Kimura (@FITP) on CodePen.

ワッペン風囲み枠

優しい雰囲気の囲み枠です。ハンドメイドブログ、ママブログと相性がよいのでは。背景色と線の色を変えてみると面白いかも。

アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div class="blue" style="padding: 20px;width: 80%;background-color: #E3F2FD;border: 2px dashed #85C1E9;box-shadow: 0px 0px 0px 15px #E3F2FD;border-radius: 8px;color: #80888D;">  
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br>
枠の中には自由に文章を書きます。
</div>

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 ワッペン風 by Yukari Kimura (@FITP) on CodePen.

タイトルタブ付き囲み枠

タブ風のタイトル枠のある囲み枠です。

お知らせ
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div class="blue" style="position: relative;padding: 20px;width: 80%;border: 1px solid #A9CCE3;border-radius: 0 4px 4px 4px;color: #80888D;"><span style="position: absolute;top: -26px;left: -1px;padding: 5px 25px;background-color: #A9CCE3;border-radius: 4px 4px 0 0;color: #fff;font-weight: 800;letter-spacing: .3em;line-height: 1em;">お知らせ</span>
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br>
枠の中には自由に文章を書きます。
</div>

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 見出しタブ付き by Yukari Kimura (@FITP) on CodePen.

タイトル付き囲み枠

タイトル枠のある囲み枠です。

お知らせ
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ
枠の中には自由に文章を書きます。

アメブロでの記事内やメルマガで使用する場合<インラインCSS>

<div class="blue" style="position: relative;padding: 20px;width: 80%;border: 1px solid #A9CCE3;border-radius: 0 0 4px 4px;color: #80888D;"><span style="position: absolute;top: -30px;left: -1px;width: 100%;padding: 5px 0 5px 20px;background-color: #A9CCE3;border: 2px solid #A9CCE3;box-shadow: 2px 0 1px #A9CCE3;border-radius: 4px 4px 0 0;box-sizing: border-box;color: #fff;font-weight: 800;letter-spacing: .3em;line-height: 1em;">お知らせ</span>
アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br>
枠の中には自由に文章を書きます。
</div> 

アメブロカスタマイズ等で使用する場合<CSSファイル用>

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen 囲み枠 見出し付き by Yukari Kimura (@FITP) on CodePen.

アイコン付き囲み枠3種類

枠の真ん中にアイコンを付けた囲み枠です。ハート、はさみ、スーツケースの3つを用意しました。色は、ご自身のアメブロやサイトの色に合わせて変えてコピーして使ってみてください。

この囲み枠は、Webフォントと擬似要素を使ってアイコンを表示しています。そのため、CSSファイルにのみ対応で、文中で使用できるインラインスタイルシートには対応していません。アメブロで使う時には、CSS編集画面からで一番下にコピペして下さい。

See the Pen アイコン付き囲み枠 by Yukari Kimura (@FITP) on CodePen.

コピペで使える見出しのCSSデザイン記事も合わせて活用してみてください。
[blogcard url=”https://office-fitplus.com/column/ameblocustomize/css-midashi/”]

この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts