【Blogger/QooQ】トップページ記事一覧：最新記事を大きく表示させる

完成イメージ

よく見かける一発目どーんのやつです。

cssの準備

「list-item」をコピーして「list-item-top」を作成、追加する。
「flex-basis」を100%にする。

.list-item-top {					/* 1つ目の記事 */
	flex-basis		: 100%;
	margin-top		: 8px;
	border-radius		: 3px;
	background		: $(other.back);
}
.list-item {						/* 2つ目以降の記事 */
	flex-basis		: 49.5%;
	margin-top		: 8px;
	border-radius		: 3px;
	background		: $(other.back);
}

htmlの修正

最初の記事かどうかを判別する「<b:if cond='data:post.isFirstPost'>～<b:else/>～</b:if>」を追加。
「<article class='list-item'>～</article>」の塊をコピーしてif後に挿入。
挿入した「<article class='list-item'>」を先程追加したクラス「list-item-top」に変更。
->「<article class='list-item-top'>」に。
元の「<article class='list-item'>～</article>」の塊はelse後に挿入。

元のコード

<b:includable id='post' var='post'>
	<article class='list-item'>
	<b:if cond='data:post.dateHeader'>
		<script type='text/javascript'>var jsdate = &quot;<data:post.dateHeader/>&quot;</script>
	</b:if>

	<b:if cond='data:post.thumbnailUrl'>
		<a expr:href='data:post.url'>
			<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)'/>
		</a>
	</b:if>

	<div class='list-item-inner'>
		<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
		<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
		<p class='list-item-category'>
			<b:loop values='data:post.labels' var='label'>
				<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
			</b:loop>
		</p>
	</div>
	</article>
</b:includable>

修正後のコード

<!-- トップページの記事一覧 -->
<b:includable id='post' var='post'>

	<!-- 最初の記事 -->
	<b:if cond='data:post.isFirstPost'>

	<article class='list-item-top'>
	<b:if cond='data:post.dateHeader'>
		<script type='text/javascript'>var jsdate = &quot;<data:post.dateHeader/>&quot;</script>
	</b:if>

	<b:if cond='data:post.thumbnailUrl'>
		<a expr:href='data:post.url'>
			<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)'/>
		</a>
	<b:else/>
		<!-- 画像がないときのデフォルト画像の用意 -->
	</b:if>

	<div class='list-item-inner'>
		<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
		<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

		<!-- ラベル一覧 -->
		<p class='list-item-category'>
			<b:loop values='data:post.labels' var='label'>
				<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
			</b:loop>
		</p>
	</div>
	</article>

	<b:else/>

	<!-- 二番目以降の記事 -->
	<article class='list-item'>
	<b:if cond='data:post.dateHeader'>
		<script type='text/javascript'>var jsdate = &quot;<data:post.dateHeader/>&quot;</script>
	</b:if>

	<b:if cond='data:post.thumbnailUrl'>
		<a expr:href='data:post.url'>
			<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)'/>
		</a>
	<b:else/>
		<!-- 画像がないときのデフォルト画像の用意 -->
	</b:if>

	<div class='list-item-inner'>
		<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
		<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

		<!-- ラベル一覧 -->
		<p class='list-item-category'>
			<b:loop values='data:post.labels' var='label'>
				<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
			</b:loop>
		</p>
	</div>
	</article>

	</b:if>
</b:includable>