ピンク系可愛いHTML囲み枠まとめ♡はてなブログで使える

はてなブログで使える可愛いピンク系の囲み枠のHTML集です。

はてなブログの「html編集」画面でコピペして貼り付けるだけで簡単にかわいい囲み枠が完成します。

f:id:sfcsapporo:20181108004910j:image

①編集画面で「HTML編集」をクリック

f:id:sfcsapporo:20181108001321p:plain

②下記の囲み枠一覧から好きなタグをコピペして貼り付けます。

③貼り付けたら「編集見たまま」に戻して入力します。

HTML囲み枠一覧

囲み枠内での改行は『Shift＋Enter』

※Enterのみで改行してしまうと枠外から出てしまいます。

見出し付きタイトル

タイトル

<fieldset style="border: 3px double #ff1493;"><legend><span style="font-weight: bold;">目次</span></legend>
<p>ここに本文</p></fieldset>

■合わせて読みたい■

<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ff1493; color: #ffffff; font-weight: bold; border-radius: 5px;">■合わせて読みたい■</span></div>
<div style="border: 2px solid #ff1493; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">ここに本文</div>

■合わせて読みたい■

<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ff7fbf; color: #ffffff; font-weight: bold; border-radius: 5px;">■合わせて読みたい■</span></div>
<div style="border: 2px solid #ff7fbf; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">ここに本文</div>

■ここにタイトルを入力する

<div style="background: #fff0f5; border: 1px solid #fff0f5; padding-left: 10px;"><span style="color: #ffb6c1; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #fff0f5; padding: 10px;">ここに本文を入力する。</div>

■ここにタイトル

<div style="background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #ff7fbf; padding: 10px;">ここに本文を入力する。</div>

タイトル

<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #00CCFF;">タイトル</span></div>
<div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #00CCFF;">ここに文章を記入してください。</div>

タイトル

<fieldset style="border: 1px solid #000000; padding: 10px;"><legend>タイトル</legend><p style="font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; margin: 0px; caret-color: #34495e; color: #34495e; font-family: 'Open Sans', sans-serif, google;">ここに文字を入力する。</p></fieldset>

ピンクの囲み枠

<div style="padding:10px;border:3px dotted #ffb6c1;">ここに本文</div><br>

<div style="background:#fff; padding:10px; border:2px solid #FF1493;">本文を入れる</div>

<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">本文を入れる</div>

<div style="background:#FFFFFF; padding:10px; border-radius: 10px; border: 2px dotted #FF1493;">本文を入れる</div>

<div style="background:#FFFFFF; padding:10px; border-radius: 10px; border: 2px dotted #FFCCCC;">本文を入れる</div>

<div style="padding:10px;border-radius: 10px; border: 5px double #ff1493;">本文を入れる</div>

<div style="padding:10px;border-radius: 10px; border: 5px double #FFCCCC;">本文を入れる</div>

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ffe0f0; box-shadow: 0 0 0 5px #ffe0f0; border: dashed 2px #ffffff;">ここに本文</div>

<div style="background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;">ここに本文</div><br>

<div style="background: #fff0f5; padding: 10px; border: 3px double #ffb6c1;">ここに本文を入れる</div>

シンプルな影付き囲み枠

<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #FFCCCC; background: #fff;">ここに本文を入れる</div>

<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入れる</div>

HTML 背景カラーつき囲み枠

<div style="background-image:linear-gradient(#ffd6ea,#ffe0ef,#ffeff7,#ffe0ef,#ffd6ea);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #ffcce5; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入れる<br></div>

<div style="background:#f2e2ee;box-shadow:#f2e2ee 0 0 10px 10px;-webkit-box-shadow:#f2e2ee 0 0 10px 10px;-moz-box-shadow:#f2e2ee 0 0 10px 10px;padding:10px;margin:20px;"><p>ここに本文<br></p></div>

<div style="background:#e6e6fa;box-shadow:#e6e6fa 0 0 10px 10px;-webkit-box-shadow:#e6e6fa 0 0 10px 10px;-moz-box-shadow:#e6e6fa 0 0 10px 10px;padding:10px;margin:20px;"><p>ここに本文<br></p></div>

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #ddd inset; -moz-box-shadow: 0 0 50px #ddd inset; box-shadow: 0 0 50px #ddd inset; font-size: 100%;">
ここに本文</div>

<div style="background:#f7f7f7;padding:10px;width: auto;margin-right:6px;box-shadow: 5px 5px 5px #AAA;border: 2px dotted #CCCCCC;">ここに本文</div><br>

<div style="background: #ffe0ef; box-shadow: #ffe0ef 0 0 10px 10px; -webkit-box-shadow: #ffe0ef 0 0 10px 10px; -moz-box-shadow: #ffe0ef 0 0 10px 10px; padding: 10px; margin: 20px;">ここに本文</div>

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #ffb6c1; border-radius: 10px; background-color: #fff0f5;"> ここに本文</div>

<div style="color: #fff; background: #f08080; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #f08080; -moz-box-shadow: 0 0 0 5px #f08080; -webkit-box-shadow: 0 0 0 5px #f08080;; font-size: 100%;">
ここに本文</div>

✉️各種お問い合わせ

SPGアメックスカードの紹介をしています。ご希望の方はメールフォームまたは自動返信システムの@LINEを追加ください。その他お問い合わせ・お仕事依頼もメールフォームよりどうぞ。
メールフォーム @LINE

♡ぶー子のほしいものリスト♡