こんにちは。YOSHITAKA（@YOSHITA19704216）です。
初心者
お知らせラブ付きのCSSはありますか？
よしたか
色々あるのでコピペしてください。
このようなお知らせタグを作りましょう。
この記事を読むことで
- アメブロでお知らせタグの作り方がわかります。
Contents
お知らせタグの作り方
上下ラインのみで、先頭に「お知らせ」という、シンプルな枠ですが使えると思いますのでご利用ください。
【囲み枠の反映のさせ方】
- 以下の枠内のタグをコピーする
- 記事編集画面でHTML表示に切り替えてコピーしたタグを貼り付ける
- 標準表示に戻す
- 囲み枠内にリンクやテキストを作る
- 記事下定型文ができたらそれだけで保存し、複製しておけばいつでも利用可能になります
カスマイズバリエーション （コピペでOK）
いくつか色パターンのタグがあるので、もしよければ好きなものを使ってみて下さい。
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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><br><br>
CSSコピペ
お知らせ
<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>
ここに本文
ここに本文
ここに本文
</div><br><br>
まとめ
今回はお知らせタグについてお伝えしました。
いろんな色のバリエーションも作ってありますので、ご自身でコピペをしながら自分に必要な情報を持って行ってください。
基本的に僕は WordPress でやっているので、アメブロのところに取り付けなどはしませんが、この方法で十分に間に合うと思います。
文言なども変えて利用しても構いませんので、ぜひこのタグを利用してみてください 。
