MENU
旬なトレンド・5chまとめ記事を配信しています。
  1. ホーム
  2. 過去記事
  3. ワードプレス
  4. 素材集
  5. 【コピペで出来る】おしゃれなWordPress囲み枠サンプル集（破線囲み枠）

【コピペで出来る】おしゃれなWordPress囲み枠サンプル集（破線囲み枠）

素材集
2020.06.05

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

 

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

 

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

 

あわせて読みたい
WordPressで文章に囲み枠をつける手順！初心者でも簡単！ 今回は、WordPressで文章に囲み枠をつける方法を紹介します。 WordPressで記事を書いていくと、強調したい部分・文章を装飾したくなります。   そんな時に便利なのが「...

 

目次

見出し付きの囲み枠

 

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

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

 

自由に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>

 

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

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

 

【WEB色見本】https://www.colordic.org/

 

 

 

素材集
コピペ ワードプレス 囲み枠 破線

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！

この記事を書いた人

HESOKURIのアバター HESOKURI

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

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

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

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

関連記事

コメント

コメント一覧 （2件）

  • ◆在宅副業専科ベストランキングサイト（強化版）へのご案内◆（相互リンクのご提案）

    ヘソクリ様

    初めまして。私は小田ゆきおと申します。
    突然のメールご連絡となり誠に申し訳ございません。

    貴サイト拝見させていただきました。
    充実した内容に大変共感を持ちました。

    現在私は、現在急成長中の“在宅副業専科ベストランキング”というウェブサイトを運営しております。
    この度貴サイトを拝見し、ヘソクリ様のブログに当サイトを是非ともご活用いただきたく連絡させていただきました。

    http://sub-biz.online/

    当サイトでは、副業、在宅ビジネス等に特化し、ひとでも多くの方に有用なツールとしてご紹介させていただいております。
    ご登録を頂けますことにより、アクセス数の増加や被リンクの効果などによりヘソクリ様のドメインのさらなる強化にお役に立てるものと確信しております。
    当サイトへのご登録は完全無料で、個人情報などは一切必要ございません。

    これを機会にご検討いただけると大変幸甚に存じます。

    小田ゆきお

    返信

小田ゆきお へ返信する コメントをキャンセル

目次
閉じる