お知らせタブ付きの記事下定型文の囲み枠

こんにちは。
『やさしいブログの作り方』の松田です。

私のブログ記事の最後には今、こんな記事下定型文の枠をつけています。



上下ラインのみで、先頭に「お知らせ」という、実にシンプルな枠です（笑）

いくつか色パターンのタグを作ってみたので、もしよければ好きなものを使ってみて下さい。


【囲み枠の反映のさせ方】

以下の枠内のタグをコピーする
↓
記事編集画面でHTML表示に切り替えてコピーしたタグを貼り付ける
↓
標準表示に戻す
↓
囲み枠内にリンクやテキストを作る
↓
記事下定型文ができたらそれだけで保存し、複製しておけばいつでも利用可能になります


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#009DBF; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #009DBF; border-bottom:2px solid #009DBF; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#dc143c; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #dc143c; border-bottom:2px solid #dc143c; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#ff8080; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #ff8080; border-bottom:2px solid #ff8080; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#e6e6fa; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #e6e6fa; border-bottom:2px solid #e6e6fa; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#add8e6; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #add8e6; border-bottom:2px solid #add8e6; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#4169e1; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #4169e1; border-bottom:2px solid #4169e1; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#3b5998; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #3b5998; border-bottom:2px solid #3b5998; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#32cd32; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #32cd32; border-bottom:2px solid #32cd32; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#ffa500; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #ffa500; border-bottom:2px solid #ffa500; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#bfa469; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #bfa469; border-bottom:2px solid #bfa469; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#d2691e; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #d2691e; border-bottom:2px solid #d2691e; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>


お知らせ
<div style="margin:0; padding:0; width:90px; height:25px; background:#696969; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #696969; border-bottom:2px solid #696969; padding:20px 10px; word-break:break-all;">
ここに本文
ここに本文
ここに本文
</div><br><br>



最後までお読みいただきありがとうございました。

お知らせ
ご登録頂くと、ＬＩＮＥ＠スタートアップセミナーをプレゼント！
やさしいブログのＬＩＮＥ＠のご登録はこちらから

ＳＮＳを効果的に使うためのポイントが無料で学べます！
ネット集客を軌道に乗せるためのＳＮＳ活用講座（全７回）