お知らせ用パーツ

お知らせ用パーツ

• 黒、青、白、オレンジのカラーは、theme.cssの :rootにしているカラーコードが適用されます。各パーツに直接カラーを指定してもOKだし、この :root のカラーコードを好みのテーマカラーに調整して頂いてもOK。

お知らせ用パーツ一覧

news1

アイコン入りのお知らせ用パーツ。

<section> <h2>news1-parts</h2> <dl class="news1-parts"> <dt>2000/00/00<span>その他</span></dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00<span class="accent-color">重要</span></dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00<span>サービス</span></dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00<span>その他</span></dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00<span>その他</span></dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> </dl> </section>

html

/*news（お知らせ） ---------------------------------------------------------------------------*/ dl.news1-parts * {margin: 0;padding: 0;} /*日付*/ dl.news1-parts dt { display: flex; } /*アイコン*/ dl.news1-parts dt span { display: inline-block; line-height: 1; width: 6rem; /*幅*/ padding: 0.3rem 0; /*上下に0.3文字分、左右に0の余白*/ background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/ color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ text-align: center; transform: scale(0.8); /*サイズを80%に*/ border-radius: 3px; /*角を少し丸く*/ } /*アイコン（primary背景色の上でアイコンが同化しないように）*/ .bg1-primary-parts dl.news1-parts dt span { background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/ color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ } /*アイコンを目立たせる場合（accent-color）*/ dl.news1-parts dt span.accent-color { background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/ color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } /*アイコンを目立たせる場合（accent背景色の上でアイコンが同化しないように）*/ .bg1-accent-parts dl.news1-parts dt span.accent-color { background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/ color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ } /*画面幅900px以上の追加指定*/ @media (min-width: 900px){ dl.news1-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/ align-items: start; } }/*追加指定ここまで*/

css

news2

news1のアイコンなしタイプ。

<section> <h2>news2-parts</h2> <dl class="news2-parts"> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> </dl> </section>

html

/*news（お知らせ） ---------------------------------------------------------------------------*/ dl.news2-parts * {margin: 0;padding: 0;} /*日付*/ dl.news2-parts dt { display: flex; } /*画面幅900px以上の追加指定*/ @media (min-width: 900px){ dl.news2-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/ gap: 0 2rem; /*2remが、日付とテキストとの間に空けるスペース。お好みで。*/ align-items: start; } }/*追加指定ここまで*/

css

news3

色が交互に切り替わっているお知らせ。

<section> <h2>news3-parts</h2> <dl class="news3-parts"> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>2000/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> </dl> </section>

html

/*news（お知らせ） ---------------------------------------------------------------------------*/ dl.news3-parts * {margin: 0;padding: 0;} /*日付*/ dl.news3-parts dt { display: flex; padding: 1rem 1rem 0 1rem; /*日付内の余白。上、右、下、左への順番。*/ } /*テキストブロック*/ dl.news3-parts dd { padding: 0 1rem 1rem 1rem; /*日付内の余白。上、右、下、左への順番。*/ } /*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/ dl.news3-parts dt:nth-of-type(odd), dl.news3-parts dd:nth-of-type(odd) { background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/ color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/ } /*画面幅900px以上の追加指定*/ @media (min-width: 900px){ dl.news3-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/ align-items: start; } /*日付*/ dl.news3-parts dt { align-self: stretch; padding: 0.5rem 1rem; /*日付内の余白。上下、左右への順番。*/ } /*テキストブロック*/ dl.news3-parts dd { padding: 0.5rem 1rem; /*日付内の余白。上下、左右への順番。*/ } }/*追加指定ここまで*/

css

シンプルCMS

コピペパーツではありませんが、お知らせ・一覧を出力できる無料CMSです。