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

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

 

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

 

ワードプレスで文字を囲むのって、意外と面倒なんです。

 

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

 

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

 

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

 

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

 

目次

更新情報

 

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

 

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

 

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

 

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

 

気軽にコメントしてください!

 

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

 

 

角丸の囲み枠

 

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

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

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

 

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

 

 

四角の囲み枠

 

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

 

 

右側に入力する内容

 

見出し付きの囲み枠

 

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

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

 

 

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

よかったらシェアしてね!

この記事を書いた人

『道に迷うことこそ、道を知ることだ』

道に迷いまくってブログを始めてしまいブログ歴1年、のんびり副業系ブロガーです。ブログの中身とは裏腹に、ドライブ好きのアウトドア派です。

現在『へそくり屋』と『暇つぶしドットコム』の2つのブログを運営中です。ブログについてはまだまだ未熟者です。

この『へそくり屋』では、WordPressに関する情報や、ブログアフィリエイトで役立つ情報を発信しています。

コメント

コメント一覧 (1件)

コメントする

目次
閉じる