アメブロで「お知らせタブ付きの囲み枠」のコピペの設定方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

 

初心者
お知らせラブ付きのCSSはありますか?

よしたか
色々あるのでコピペしてください。

このようなお知らせタグを作りましょう。

この記事を読むことで
  • アメブロでお知らせタグの作り方がわかります。

お知らせタグの作り方

上下ラインのみで、先頭に「お知らせ」という、シンプルな枠ですが使えると思いますのでご利用ください。

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

カスマイズバリエーション (コピペで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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>

まとめ

今回はお知らせタグについてお伝えしました。

いろんな色のバリエーションも作ってありますので、ご自身でコピペをしながら自分に必要な情報を持って行ってください。
基本的に僕は WordPress でやっているので、アメブロのところに取り付けなどはしませんが、この方法で十分に間に合うと思います。
文言なども変えて利用しても構いませんので、ぜひこのタグを利用してみてください 。

 

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事