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

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

 

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

 

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

 

 

目次

見出し付きの囲み枠

 

この記事で紹介する囲み枠は、破線の囲み枠です。

実線の囲み枠よりもおしゃれな雰囲気ですので、デザイン性も抜群です!

 

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

 

黒色

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

 

HTMLタグ

 

<div style="display: inline-block; background: #000000; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #000000;">
見出し付き囲み枠
</div>

 

灰色(グレー)

 

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

 

HTMLタグ
<div style="display: inline-block; background: #808080; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #808080;">
見出し付き囲み枠
</div>

 

シルバー

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

 

HTMLタグ

 

<div style="display: inline-block; background: #c0c0c0; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #c0c0c0;"> 
見出し付き囲み枠
</div>

 

青色

 

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

 

HTMLタグ
<div style="display: inline-block; background: #0000ff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #0000ff;">
見出し付き囲み枠
</div>

 

緑色

 

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

 

HTMLタグ
<div style="display: inline-block; background: #008000; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #008000;">
見出し付き囲み枠
</div>

 

ライム(黄緑)

 

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

 

HTMLタグ
<div style="display: inline-block; background: #00ff00; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #00ff00;">
見出し付き囲み枠
</div>

 

水色

 

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

 

HTMLタグ
<div style="display: inline-block; background: #00ffff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #00ffff;">
見出し付き囲み枠
</div>

 

黄色

 

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

 

HTMLタグ
<div style="display: inline-block; background: #ffff00; padding: 5px 10px; color: #000000; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ffff00;">
見出し付き囲み枠
</div>

 

オレンジ

 

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

 

HTMLタグ
<div style="display: inline-block; background: #ffa500; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ffa500;">
見出し付き囲み枠
</div>

 

 

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

 

HTMLタグ
<div style="display: inline-block; background: #ff0000; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff0000;">
見出し付き囲み枠
</div>

 

マゼンタ

 

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

 

HTMLタグ
<div style="display: inline-block; background: #ff00ff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff00ff;">
見出し付き囲み枠
</div>

 

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

 

HTMLタグ
<div style="display: inline-block; background: #800080; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #800080;">
見出し付き囲み枠
</div>

 

茶色

 

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

 

HTMLタグ
<div style="display: inline-block; background: #800000; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>タイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #800000;">
見出し付き囲み枠
</div>

 

囲み枠をアレンジ

 

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

今回紹介した見出し付き囲み枠のHTMLタグを簡単に説明します。

 

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

 

HTMLタグ

<div style=”display: inline-block; background: #ff00ff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;”><strong>タイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff00ff;”>
見出し付き囲み枠
</div>

 

見出しの色を変える

 

✅見出しの色を変えるには、以下のHTMLタグの1行目、赤太部分をアレンジします。

#ff00ffはマゼンタのカラーコードです。

 

<div style=”display: inline-block; background: #ff00ff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;”><strong>タイトル</strong></div>

 

このカラーコードを編集してあげると、任意の文字色に変更することが出来ます。

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

 

 

枠線の色を変える

 

見出しの色を変えたら、枠線の色も併せて変えてあげましょう。枠線の色はHTMLタグの2行目をカスタムすることで変えることが出来ます。

以下の赤太文字部分のカラーコードを編集してあげます。

 

<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff00ff;”>
よかったらシェアしてね!

この記事を書いた人

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

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

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

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

コメント

コメント一覧 (1件)

コメントする

目次
閉じる