【コピペで出来る】おしゃれなWordPress囲み枠サンプル集(見出し付き囲み枠)

見出し付き囲み枠
見出し+本文で分かりやすい!

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

 

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

 

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

 

スポンサーリンク

見出し付きの囲み枠

 

この記事で紹介する囲み枠は、見出し付きの囲み枠です。

見出し部分があることで、囲み枠の中身はどんなことが書いているか分かりやすいです。

 

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

 

黒色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

灰色(グレー)

 

タイトル
見出し付き囲み枠
HTMLタグ

 

シルバー

 

タイトル
見出し付き囲み枠
HTMLタグ

 

青色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

緑色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

ライム(黄緑)

 

タイトル
見出し付き囲み枠
HTMLタグ

 

水色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

黄色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

オレンジ

 

タイトル
見出し付き囲み枠
HTMLタグ

 

 

タイトル
見出し付き囲み枠
HTMLタグ

 

マゼンタ

 

タイトル
見出し付き囲み枠
HTMLタグ

 

 

タイトル
見出し付き囲み枠
HTMLタグ

 

茶色

 

タイトル
見出し付き囲み枠
HTMLタグ

 

囲み枠をアレンジ

 

紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけ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>

 

見出しの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. […] […]

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