【コピペで出来る】おしゃれなWordPress囲み枠サンプル集(シンプル・角丸無背景)

未分類

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

 

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

 

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

 

スポンサーリンク

シンプルでおしゃれな囲み枠(背景なし・角丸)

 

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

囲み枠の背景がないので、ブログに背景画像を設定している場合などに便利です。

 

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

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

 

黒色

 

シンプルな囲み枠
HTMLタグ

 

灰色(グレー)

 

シンプルな囲み枠
HTMLタグ

 

シルバー

 

シンプルな囲み枠
HTMLタグ

 

青色

 

シンプルな囲み枠
HTMLタグ

 

緑色

 

シンプルな囲み枠
HTMLタグ

 

ライム(黄緑)

 

シンプルな囲み枠
HTMLタグ

 

水色

 

シンプルな囲み枠
HTMLタグ

 

黄色

 

シンプルな囲み枠
HTMLタグ

 

オレンジ

 

シンプルな囲み枠
HTMLタグ

 

 

シンプルな囲み枠
HTMLタグ

 

マゼンタ

 

シンプルな囲み枠
HTMLタグ

 

 

シンプルな囲み枠
HTMLタグ

 

茶色

 

シンプルな囲み枠
HTMLタグ

 

囲み枠をアレンジ

 

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

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

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

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

 

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

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

 

背景が色ありの囲み枠

 

今回紹介した囲み枠は、囲み枠内の背景がないデザインです。

ですので、ブログデザインで記事内の背景画像を設定している場合、囲み枠内の文章が見えにくくなる可能性もあります。

その場合は、背景色ありの囲み枠を使うと見やすくなると思います。

 

背景色ありバージョンの囲み枠は以下の記事で紹介しています。

 

 

コメント

  1. へそくり屋 より:

    […] […]

タイトルとURLをコピーしました