ワードプレス CSSで作るお知らせボード
CSS（スタイルシート）でお知らせボードみたいなのを作りました。
お店や、何かのイベント告知などで使えそうです(*’ω’*)
お知らせ
【イベント開催のお知らせ】
日時：2016年4月1日AM10：00より
場所：〇〇市〇〇町〇〇番地
料金：入場無料
CSS（スタイルシートに追加）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.boxx { position: relative; background-color: #84ea06; padding: 1em; border-radius: 10px; } .boxx h5 { position: absolute; top: -3em; background-color: rgba(207, 246, 8, 0.4); padding: 0.25em 2em; color: #ff0505; transform: rotate(-4deg); font-size: medium; } |
HTML（本文への書き方）
|
1 2 3 4 5 6 7 8 9 |
<div class="boxx"> <h5>お知らせ</h5> <p> 【イベント開催のお知らせ】 日時：2016年4月1日AM10：00より 場所：〇〇市〇〇町〇〇番地 料金：入場無料 </p> </div> |
そして、応用してみました。
お知らせ
【イベント開催のお知らせ】
日時：2016年4月1日AM10：00より
場所：〇〇市〇〇町〇〇番地
料金：入場無料
ご家族、お友達をお誘いの上お気軽にお越しくださいね。
以上、最後まで見て頂きありがとうございます。(‘◇’)ゞ
この記事へのコメントはありません。