Lust-Life 40代わたしの生き方

田舎でフリーランスとしてブラックなみに働いている40代主婦の忘却録。色々な断捨離や子供の事、ファッションや働き方などあるよ♪

【ブログで使う】囲み枠のデザイン集。コピペでOkなデザインまとめ

f:id:takahai:20180807025734j:plain

ブログを書いてて、
文章をちょっと囲んでおきたい時ありませんか?

例えば

  • 注意点を書く時
  • チェックポイントを書く時
  • 強調したい文章を目立たせたい時
  • 格言なんかを書く時(あるのか?)

などなど。

そんな時にデザインされたボックスを使うと、とっても読みやすく読者の方に伝わりやすくなりますよ。

↓参加中です。ポチ応援していただければ小踊りします↓
にほんブログ村 子育てブログ ワーキングマザー育児へ にほんブログ村 その他生活ブログ 断捨離へ にほんブログ村 主婦日記ブログ 40代主婦へ

わたしもWEB作成者ですから、本来は自分でデザインしたものを公開するのが良いのだと思ってます。

けれど世の中にはすでに優秀なデザインを公開してらっしゃる方がいるので、その方を紹介したほうが早いし、同じようなデザインを提供しない方が良いと思いまとめ記事にしてみました。

 

今回紹介しているサイトはそれはもう素晴らしいデザインなので、ぜひ使用してみてください!

 

囲み枠(ボックス)デザインまとめ

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

saruwakakun.com

「サルワカ」さんはとっても有名なサイトです。

そしてとってもおしゃれです。今回紹介したボックスデザイン以外にも色々と公開されてますし、HTMLとCSSの解説もとても丁寧なサイトさんです。

 

マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに

blog.minimal-green.com

その名の通りマスキングテープのようなデザインが揃ってます。女性向けです。ちなみに、こちらははてなブログのテンプレートテーマを提供されているminimalgreenさんのデザインです。わたしの今使っているテンプレートはこちらのものをお借りしてます。ありがとうございます!

 

黒板風囲み枠CSSでブログの解説記事をまとめよう

blog.minimal-green.com

こちらもminimalgreenさんのデザインです。素敵です。リスペクト!

 

コピペで可愛く装飾! CSSのみでデザインする囲み枠(ボックスデザイン)

0edition.net

とてもかわいらしい囲み枠が揃ってます。女性向けです。

 

【CSS】シンプルな囲み枠(ボックス)コピペで楽チン変更も簡単♪

こちらはシンプルから凝ったものまであります。男性でも使いやすいデザインが揃ってます。

love-wave.com

 

また、はてなブロガーさんですが、ちょっとかわいいメモ風デザインを提供されているのでそちらも紹介します。

www.foxism.jp

ただ初心者の方にはちょっと難しいかもしれないです。

 

まとめ

囲み枠を紹介しましたが、いかがだったでしょうか。

特にサルカワさんやは追加方法が詳しく書かれているので参考になると思います。

ここで紹介したデザインを使って、読みやすくてキレイなブログを作っていってください!

わたしも日々努力!頑張ります!

 

↓参加中です。ポチ応援していただければ小踊りします↓
にほんブログ村 子育てブログ ワーキングマザー育児へ にほんブログ村 その他生活ブログ 断捨離へ にほんブログ村 主婦日記ブログ 40代主婦へ