コピペで使える！ワードプレス囲み枠サンプルがたくさん！囲み枠のデパート

ワードプレスで文章を線で囲みたいときは、
HTMLコードをテキストモードに書き込んだり、HTML挿入する必要があります。

 

ブログ初心者の人は、HTMLのことなんて分かるはずもないです…知識が必要です。

 

 

そこで、気に入った囲み枠を選んでコピペするだけ！
という便利なサイトがあればいいな…と思い作成しました。

 

もともとは自分の為に作っていた囲み枠のHTMLをこの記事で公表しちゃいます！

 

このブログに書いてある囲み枠のHTMLは自由にコピペするなり、煮るなり焼くなり…自由に使ってもらって構いません！

 

気に入った囲み枠を見つけて、自由にお使いください。

 

更新情報

 

• ページを見やすくしました（2020/08/29）
• 囲み枠を追加しました！四角＋二重線（2020/08/30)

 

コピペで使える！囲み枠のHTML集

 

ここからは、コピペで使える囲み枠のHTMLタグを紹介していきます。

 

✅HTMLタグは随時更新していきます。もし、”こんな囲み枠が欲しい！”という要望があればコメントなどでお知らせください！

 

 

また、囲み枠のHTMLをどうやって使えばいいか解説している記事がありますので、あわせてご覧ください。

 

 

角丸の囲み枠

 

四角で、角が丸いタイプの囲み枠です。

無背景タイプの囲み枠は、ブログ自体に背景色・画像を設定している場合、文字が見えにくくなることがあります。

その場合は、背景ありバージョンを使ってみると良いでしょう。

 

アイコンをクリックすると素材ページにアクセスできます。

 

 

四角の囲み枠

 

シンプルな四角ですので、使いやすさは抜群かと思います。影付きや破線タイプもありますので、お好みで選んでお使いください。

 

 

 

見出し付きの囲み枠

 

見出し付きの囲み枠は、見出し＋本文の2段で構成されます。

普通の四角い囲み枠よりも、読者の目に留まりやすい囲み枠です。まとめや重要部分の強調にも使いやすいです。

 

 

文字に合わせるタイプは、見出しの文字数によって幅が変わります。