見出し付き囲み枠
見出し＋本文で分かりやすい！
この記事では、Wordpressなどでコピペして使える囲み枠のHTMLを紹介しています。
WordPressで使用する場合は、テキスト表示・もしくはHTMLタグにした状態でペーストするだけで、簡単に囲み枠を作成することが出来ます。
囲み枠の作成方法については、以下の記事で詳しく紹介していますのでご覧ください。
目次
見出し付きの囲み枠
この記事で紹介する囲み枠は、見出し付きの囲み枠です。
見出し部分があることで、囲み枠の中身はどんなことが書いているか分かりやすいです。
自由にHTMLタグをコピペしてお使い下さい。
黒色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #000000; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #000000; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
灰色（グレー）
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #808080; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #808080; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
シルバー
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #c0c0c0; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #c0c0c0; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
青色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #0000ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #0000ff; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
緑色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #008000; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #008000; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
ライム（黄緑）
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #00ff00; padding: 5px 10px; color: #000000; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #00ff00; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
水色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #00ffff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #00ffff; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
黄色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: ffff00; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #ffff00; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
オレンジ
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #ffa500; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #ffa500; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
赤
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #ff0000; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #ff0000; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
マゼンタ
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #ff00ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #ff00ff; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
紫
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #800080; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #800080; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
茶色
タイトル
見出し付き囲み枠
HTMLタグ
<div style="background: #800000; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>タイトル</strong></div> <div style="background: #ffffff; padding: 10px; border: 2px solid #800000; border-radius: 0 0 10px 10px;">見出し付き囲み枠</div>
囲み枠をアレンジ
紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけHTMLタグをいじるだけで簡単に設定できます。
今回紹介した見出し付きHTMLタグを簡単に説明します。
タイトル
見出し付き囲み枠
赤文字が見出しのHTMLで、青文字が本文のHTMLです。
<div style=”background: #00ffff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>タイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #00ffff; border-radius: 0 0 10px 10px;”>見出し付き囲み枠</div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #00ffff; border-radius: 0 0 10px 10px;”>見出し付き囲み枠</div>
見出しのHTMLタグ
<div style=”background: #00ffff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>タイトル</strong></div>
赤文字：見出しの背景色 （#00ffff=水色）
青文字：見出しの文字色 （#ffffff=白）
本文のHTMLタグ
<div style=”background: #ffffff; padding: 10px; border: 2px solid #00ffff; border-radius: 0 0 10px 10px;”>見出し付き囲み枠</div>
赤文字：本文の背景色 (#000000=白)
青文字：本文の囲み枠色 (#00ffff=水色)
これらのカラーコードを編集してあげると、任意の文字色に変更することが出来ます。
カラーコードは以下のサイトで簡単に調べることが出来ます。
コメント
コメント一覧 （1件）
[…] […]