記事リンク(1行)一旦開発完了

2021-09-09 お知らせ
記事のタイトル記事のタイトル記事のタイトル
2021-10-18 長めのラベル
記事のタイトルがとても長いものの時記事のタイトルがとても長いものの時記事のタイトルがとても長いものの時記事のタイトルがとても長いものの時記事のタイトルがとても長いものの時

クラス名

bl_entryItem

マークアップ例

<div class="bl_entryItem">
	<div class="bl_entryItem_header">
		<time class="el_date">2021-10-18</time>
		<span class="bl_entryItem_label">
			<b class="el_label">お知らせ</b>
		</span>
	</div>
	<a href="">記事のタイトル記事のタイトル記事のタイトル</a>
</div>
<!-- /.bl_entryItem -->

定義

機能
記事のタイトルと少しの追加情報があるリンクを提供する
日付、カテゴリ名(リンクなし)、記事タイトル(ここにリンク)

あしらい・振る舞い
記事タイトル部分が50%を下回るような幅になるとき、記事タイトルの前で行をあらためて記事タイトルが続く。
ラベルが長い場合は省略される

特記事項
とくになし

変数とデフォルト値

--bl--entry-item--pad: 1em 0;
--bl--entry-item--gap: 2em;
--bl--entry-item--date--w: 6em;
--bl--entry-item--label--w: 7em; //※

※ラベルを使わない時は、–bl–entry-item–label–w を0とする

ファイルパス

assets/scss/block/entry-item

Change Log

  1. 開発開始:2021-10-19
  2. 長いタイトルやカテゴリ名の時の崩れを修正
  3. 最終更新:2022-09-18