ブログカスタマイズをご依頼いただいた縁でお友達になった美顔整体のayumiさんと、そのayumiさんを紹介してくれたハッピー妻☆きゃんちゃんと、丸の内でランチしてきました！
手前からきゃんちゃん、左奥あゆみさん、右奥もじこ
その際に、ayumiさんから「囲み枠ってどうやるの？」とご質問いただいたので、ネタにしてみますー。
サンプルその１
Topics
タイトルラベルがボックスから飛び出しているようなデザインです。重要なポイントなどを強調したいときに使うのがおすすめです。
ソース
<div style="position: relative;margin: 2em 0;padding: 0.5em 1em;border: solid 3px #ffc3c3;background:#eeefe7;border-radius: 0 8px 8px 8px;"> <span style="position: absolute;display: inline-block;top: -27px;left: -3px;padding: 0 9px;height: 25px;line-height: 25px;vertical-align: middle;font-size: 17px;background: #ffc3c3;color: #ffffff;font-weight: bold;border-radius: 5px 5px 0 0;">Topics</span> <p style="margin: 0; padding: 0;">タイトルラベルがボックスから飛び出しているようなデザインです。重要なポイントなどを強調したいときに使うのがおすすめです。</p> </div>
アプリで更新するときは、↑のソース（<div style 〜</p> </div>）をコピーしてから、右下のHTML編集を選択して
ペースト
←を選択して、プレビューモードにしたら、こんな感じ↓になっているハズ。
あとは中の文章を、お好きに編集してください。
んでは
サンプルその２
背景と線の色をピンクにして、角に大きめの丸みをつけると、さらにガーリーな印象のボックスデザインになります
ソースコード書き方
<div style="padding: 0.2em 0.5em;margin: 2em 0;color: #565656;background: #ffeaea;box-shadow: 0px 0px 0px 10px #ffeaea;border: dashed 2px #ffc3c3;border-radius: 6px;"> <p style="margin: 0; padding: 0;">背景と線の色をピンクにして、角に大きめの丸みをつけると、さらにガーリーな印象のボックスデザインになります</p> </div>
同様のやりかたで、コピペしてみてくださいねー。