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

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



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

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


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

以下の枠内のタグをコピーする

記事編集画面で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>



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

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

これからブログを頑張っていきたい! まずは基本から。
やさしいブログづくりのための、やさしいメール講座

初めてでも安心して始められるメルマガ作成ガイド。
メルマガスタートアップガイド YouTubeにて配信中

ブログが持つ魅力や可能性を私の言葉で綴りました。
書籍はこちらのオンラインショップのみで販売中です!