お知らせ用パーツ
利用規約
テンプレートの著作を外したい場合
無料プログラム
フォームビルダー(トライアル版)
フォームビルダー(有料版)
シンプルCMS(無料)
ホームページ作成CMS(無料)
一覧・詳細に特化したCMS(無料)
サポート
マニュアル
HTML・CSS簡易チェッカー
よく頂く質問
サポート掲示板
お問い合わせ
お知らせ用パーツ
黒、青、白、オレンジのカラーは、theme.cssの :rootにしているカラーコードが適用されます。各パーツに直接カラーを指定してもOKだし、この :root のカラーコードを好みのテーマカラーに調整して頂いてもOK。
お知らせ用パーツ一覧
news1
アイコン入りのお知らせ用パーツ。
news1-parts
2000/00/00
その他
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
重要
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サービス
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
その他
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
その他
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
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のアイコンなしタイプ。
news2-parts
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
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
色が交互に切り替わっているお知らせ。
news3-parts
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
2000/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
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です。
◀︎
1,000点の
テンプレート
テンプレートを
自分で作る
自分で作る
テンプレート
下準備
1. ご利用の前に
2. フレーム選択
3. レイアウト選択
パーツ選択
メイン画像
見出し・文章セット
一覧
テーブル
お知らせ
フッター
背景
ボタン
装飾
サイドコンテンツ用
その他
旧パーツコーナー
旧パーツコーナー
コンタクトの取れないお客様情報
利用規約
テンプレートの著作を外したい場合
1,000点の
テンプレート
テンプレートを
自分で作る
下準備
1. ご利用の前に
2. フレーム選択
3. レイアウト選択
パーツ選択
スライドショー (10)
見出し (5)
一覧用 (11)
テーブル (5)
お知らせ用 (5)
フッター用 (4)
ボタン (7)
サブコンテンツ用 (1)
バックグラウンド用 (8)
その他 (17)
旧パーツコーナー
旧パーツコーナー
無料プログラム
フォームビルダー(トライアル版)
フォームビルダー(有料版)
シンプルCMS(無料)
ホームページ作成CMS(無料)
一覧・詳細に特化したCMS(無料)
サポート
マニュアル
よく頂く質問
サポート掲示板
お問い合わせ