お知らせや更新情報を表示するためのデザインパーツは「news-list」で利用できます。
以下は利用した際のサンプルの表示です。
- お知らせホームページをリニューアルしました。
- イベント情報カテゴリーカテゴリーカテゴリーカテゴリーカテゴリーカテゴリーセミナーに登壇しました
上記は以下のように記述することで実現できます。
利用する場合は、年月日の変更を忘れないようにしましょう。
上記内の”time要素のdatetime属性”を変えることで年月日が変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="news-list"> <li class="news-list_item"> <span class="news-list_item_cat"> <span class="news-list_item_cat_name cat001">お知らせ</span> </span> <time datetime="2020-12-12T00:00" class="news-list_item_date">2020年12月12日</time> <span class="news-list_item_headline"><a href="#">ホームページをリニューアルしました。</a></span> </li> <li class="news-list_item"> <span class="news-list_item_cat"> <span class="news-list_item_cat_name cat002">イベント情報</span><span class="news-list_item_cat_name cat003">カテゴリー</span><span class="news-list_item_cat_name cat004">カテゴリー</span><span class="news-list_item_cat_name">カテゴリー</span><span class="news-list_item_cat_name">カテゴリー</span><span class="news-list_item_cat_name">カテゴリー</span><span class="news-list_item_cat_name">カテゴリー</span> </span> <time datetime="2020-12-12T00:00" class="news-list_item_date">2020年12月12日</time> <span class="news-list_item_headline">セミナーに登壇しました</span> </li> </ul><!--news-list--> |
※ここで記述しているのはHTMLだけで、WordPressなどで自動で動作するようなプログラムではありませんのご注意ください。
※HTMLには改行を設けていますが、WordPressのエディタ上では改行することで余計な余白が入ったり、表示が崩れたりする場合がありますので、ご了承ください。
その場合は改行を削除して設置するようにしてください。