この記事では、Wordpressなどでコピペして使える囲み枠のHTMLを紹介しています。
WordPressで使用する場合は、テキスト表示・もしくはHTMLタグにした状態でペーストするだけで、簡単に囲み枠を作成することが出来ます。
囲み枠の作成方法については、以下の記事で詳しく紹介していますのでご覧ください。
目次
シンプルでおしゃれな囲み枠（背景なし・角丸）
この記事で紹介する囲み枠は、背景なしで角が丸いタイプの囲み枠です。
囲み枠の背景がないので、ブログに背景画像を設定している場合などに便利です。
シンプルなデザインなので、どんなブログでも使いやすいのではないかと思います。
自由にHTMLタグをコピペしてお使い下さい。
黒色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #000000; word-break: break-all;">シンプルな囲み枠</div>
灰色（グレー）
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #808080; word-break: break-all;">シンプルな囲み枠</div>
シルバー
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #c0c0c0; word-break: break-all;">シンプルな囲み枠</div>
青色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #0000ff; word-break: break-all;">シンプルな囲み枠</div>
緑色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #008000; word-break: break-all;">シンプルな囲み枠</div>
ライム（黄緑）
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #00ff00; word-break: break-all;">シンプルな囲み枠</div>
水色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #00ffff; word-break: break-all;">シンプルな囲み枠</div>
黄色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #ffff00; word-break: break-all;">シンプルな囲み枠</div>
オレンジ
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #ffa500; word-break: break-all;">シンプルな囲み枠</div>
赤
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #ff0000; word-break: break-all;">シンプルな囲み枠</div>
マゼンタ
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #ff00ff; word-break: break-all;">シンプルな囲み枠</div>
紫
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #800080; word-break: break-all;">シンプルな囲み枠</div>
茶色
シンプルな囲み枠
HTMLタグ
<div style="padding: 15px; border: 2px solid #800000; word-break: break-all;">シンプルな囲み枠</div>
囲み枠をアレンジ
紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけHTMLタグをいじるだけで簡単に設定できます。
HTMLタグ内の赤文字部分が、囲み枠の枠線色を決めている部分で、カラーコードと言います。
#800000は茶色のカラーコードです。
<div style=”padding: 15px; border: 2px solid #800000; border-radius: 10px; word-break: break-all;”>シンプルな囲み枠</div>
お好みの色のカラーコードに編集すれば、簡単に色を変えることが出来ます。
カラーコードは以下のサイトで簡単に調べることが出来ます。
背景が色ありの囲み枠
今回紹介した囲み枠は、囲み枠内の背景がないデザインです。
ですので、ブログデザインで記事内の背景画像を設定している場合、囲み枠内の文章が見えにくくなる可能性もあります。
その場合は、背景色ありの囲み枠を使うと見やすくなると思います。
背景色ありバージョンの囲み枠は以下の記事で紹介しています。
コメント
コメント一覧 （1件）
[…] […]