MENU
旬なトレンド・5chまとめ記事を配信しています。
  1. ホーム
  2. 過去記事
  3. ワードプレス
  4. 素材集
  5. 【コピペで出来る】おしゃれなWordPress囲み枠サンプル集（シンプル・角丸白抜き）

【コピペで出来る】おしゃれなWordPress囲み枠サンプル集（シンプル・角丸白抜き）

素材集
2020.05.18

この記事では、Wordpressなどでコピペして使える囲み枠のHTMLを紹介しています。

 

WordPressで使用する場合は、テキスト表示・もしくはHTMLタグにした状態でペーストするだけで、簡単に囲み枠を作成することが出来ます。

 

囲み枠の作成方法については、以下の記事で詳しく紹介していますのでご覧ください。

あわせて読みたい
WordPressで文章に囲み枠をつける手順！初心者でも簡単！ 今回は、WordPressで文章に囲み枠をつける方法を紹介します。 WordPressで記事を書いていくと、強調したい部分・文章を装飾したくなります。   そんな時に便利なのが「...

 

目次

シンプルでおしゃれな囲み枠（背景白・角丸）

 

この記事で紹介する囲み枠は、背景白で角が丸いタイプの囲み枠です。

シンプルなデザインなので、どんなブログでも使いやすいのではないかと思います。

自由にHTMLタグをコピペしてお使い下さい。

 

黒色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #000000; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

灰色（グレー）

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #808080; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

シルバー

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #c0c0c0; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

青色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #0000ff; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

緑色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #008000; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

ライム（黄緑）

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #00ff00; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

水色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #00ffff; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

黄色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #ffff00; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

オレンジ

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #ffa500; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

赤

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #ff0000; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

マゼンタ

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #ff00ff; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

紫

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #800080; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

茶色

 

シンプルな囲み枠
HTMLタグ
<div style="background: #ffffff; padding: 15px; border: 2px solid #800000; border-radius: 10px; word-break: break-all;">シンプルな囲み枠</div>

 

囲み枠をアレンジ

 

紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけHTMLタグをいじるだけで簡単に設定できます。

HTMLタグ内の赤文字部分が、囲み枠の枠線色を決めている部分で、カラーコードと言います。

#800000は茶色のカラーコードです。

<div style=”background: #ffffff; padding: 15px; border: 2px solid #800000; border-radius: 10px; word-break: break-all;”>シンプルな囲み枠</div>

 

お好みの色のカラーコードに編集すれば、簡単に色を変えることが出来ます。

カラーコードは以下のサイトで簡単に調べることが出来ます。

【WEB色見本】https://www.colordic.org/

 

 

素材集
HTML wordpress おしゃれ コピペ シンプル ワードプレス 囲み枠

この記事が気に入ったら
フォローしてね！

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

この記事を書いた人

HESOKURIのアバター HESOKURI

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

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

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

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

関連記事

コメント

コメント一覧 （1件）

へそくり屋 へ返信する コメントをキャンセル

目次
閉じる