この記事では、Wordpressなどでコピペして使える囲み枠のHTMLを紹介しています。
WordPressで使用する場合は、テキスト表示・もしくはHTMLタグにした状態でペーストするだけで、簡単に囲み枠を作成することが出来ます。
✅囲み枠の作成方法については、以下の記事で詳しく紹介していますのでご覧ください。
目次
見出し付きの囲み枠
この記事で紹介する囲み枠は、破線の囲み枠です。
実線の囲み枠よりもおしゃれな雰囲気ですので、デザイン性も抜群です！
自由にHTMLタグをコピペしてお使い下さい。
黒色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #000000; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
灰色（グレー）
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #808080; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
シルバー
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #c0c0c0; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
青色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #0000ff; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
緑色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #008000; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
ライム（黄緑）
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #00ff00; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
水色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #00ffff; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
黄色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #ffff00; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
オレンジ
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
赤
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #ff0000; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
マゼンタ
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #ff00f0; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
紫
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #800080; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
茶色
破線の囲み枠
HTMLタグ
<div style="border: 3px dashed #800000; padding: 10px; border-radius: 0px; background: ##ffffff;">破線の囲み枠</div>
囲み枠をアレンジ
紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけHTMLタグをいじるだけで簡単に設定できます。
今回紹介した破線囲み枠のHTMLタグを簡単に説明します。
破線の囲み枠
HTMLタグ
<div style=”border: 3px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff;”>破線の囲み枠</div>
破線の色を変える
✅破線の色を変えるには、以下のHTMLタグの赤太部分をアレンジします。
#ffa500はオレンジ色のカラーコードです。
<div style=”border: 3px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff;”>破線の囲み枠</div>
このカラーコードを編集してあげると、任意の文字色に変更することが出来ます。
カラーコードは以下のサイトで簡単に調べることが出来ます。
コメント
コメント一覧 （2件）
◆在宅副業専科ベストランキングサイト（強化版）へのご案内◆（相互リンクのご提案）
ヘソクリ様
初めまして。私は小田ゆきおと申します。
突然のメールご連絡となり誠に申し訳ございません。
貴サイト拝見させていただきました。
充実した内容に大変共感を持ちました。
現在私は、現在急成長中の“在宅副業専科ベストランキング”というウェブサイトを運営しております。
この度貴サイトを拝見し、ヘソクリ様のブログに当サイトを是非ともご活用いただきたく連絡させていただきました。
http://sub-biz.online/
当サイトでは、副業、在宅ビジネス等に特化し、ひとでも多くの方に有用なツールとしてご紹介させていただいております。
ご登録を頂けますことにより、アクセス数の増加や被リンクの効果などによりヘソクリ様のドメインのさらなる強化にお役に立てるものと確信しております。
当サイトへのご登録は完全無料で、個人情報などは一切必要ございません。
これを機会にご検討いただけると大変幸甚に存じます。
小田ゆきお
[…] […]