私はANAの修行僧★北海道在住OLのSFC/DIA修行ブログ

北海道好きな道産子OLブロガー♡旅行好きが高じてANAのSFC修行&DIA修行開始。ANA修行ルート♡滞在先の国内・海外旅行記♡陸マイル♡SPGアメックスでラグジュアリーなホテル滞在♡北海道観光&グルメ♡を発信しています。アメックスアンバサダーです❀SPGアメックスのご紹介できます♡お仕事依頼・SPGアメックス紹介のお問い合わせはTwitterのDMまたは当サイトお問い合わせフォームよりお願いいたします。

ピンク系可愛い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: #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="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>

 

ピンクグラデーション

<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="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>

 

 

 


 

 

 

皆さまの旅行が快適になりますように( ^ω^ )私の残念女っぷりを読んで「ぷっ」って笑っていただけて心が和んでいただけたら嬉しく思います。

♡お勧めホテル料金比較サイト♡
↪︎ホテル料金比較『トリバゴ』
↪︎Book Now on tripAdvisor

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

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