Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

このページでは、Vaster2の記事リストのタイトル・日付・ラベルの位置の変更方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


記事リスト全体のコード


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

Vaster2のトップページの記事リスト全体に対応するコードは以下の通り（色分け部分が各項目に対応するコード）。

記事リストをカスタマイズするには、以下の部分を変更していく必要がある。

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

変更方法


01．「HTMLの変更」から対応する部分を選択する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

「テーマ」から「HTMLの変更」を選択し、編集画面をワンクリックして「CTRL＋F」で検索フォームを出す。

検索フォームに「<!--TOP カテゴリ アーカイブの時-->」と入力して対応部分を検索する。

02．対応部分のコードを変更する


以下のサンプルを貼り付ける、もしくは、サンプルを参考にして対応部分のコードを書き換える。

サンプル1：記事タイトルを日付・ラベルの上に配置する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

サンプル2：日付・ラベルを要約の下に配置する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

サンプル3：日付・ラベルを下揃えにする


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

【HTML】

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
<div class='post-timestamp-tag'><!--日付・ラベルのクラス-->
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
</div>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

【CSS】

.post-timestamp-tag{
    position: absolute;
    bottom: 0;　/*　底面の値　*/
}

※CSS「記事一覧の公開日、カテゴリ名」の下に上記を追記（サムネイルなしの記事の場合レイアウトが崩れる）

サンプル4：記事タイトルを枠上に配置する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<div class='article-title'><!--記事タイトルのクラス-->
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
</div>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

※タイトル部分の装飾は、CSSで「.article-title{}」を指定して行う

サンプル5：日付・ラベルを枠下に配置する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
</div>
<div style='clear:both;'/>
<div class='post-timestamp-tag'><!--日付・ラベルのクラス-->
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
</div>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

※日付・ラベル部分の装飾は、CSSで「.post-timestamp-tag{}」を指定して行う

サンプル6：記事タイトルを枠上に、日付・ラベルを枠下に配置する


Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<div class='article-title'><!--記事タイトルのクラス-->
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
</div>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
</div>
<div style='clear:both;'/>
<div class='post-timestamp-tag'><!--日付・ラベルのクラス-->
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
</div>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

※タイトル部分の装飾は、CSSで「.article-title{}」を指定して行う
※日付・ラベル部分の装飾は、CSSで「.post-timestamp-tag{}」を指定して行う

サンプル7：記事タイトルを枠上に、日付・ラベルをサムネイルの下に配置する

Blogger Labo：【Vaster2】記事リストのタイトル・日付・ラベルの位置を変更する方法

【HTML】

<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
<a class='article-list-link' expr:href='data:post.url'>
<div class='article-list'>
<div class='article-title'><!--記事タイトルのクラス-->
<h2><!--記事タイトルのコード-->
<data:post.title/>
</h2>
</div>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
<div class='article-list-title'>
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
<div class='post-timestamp-tag'><!--日付・ラベルのクラス-->
<p class='post-timestamp'><!--日付のコード-->
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
</b:if>
</b:if>
</p>
<p class='post-tag'><!--ラベルのコード-->
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
</p>
</div>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->

【CSS】

/* 日付・ラベルのCSS */

 .post-timestamp-tag{
position: absolute;
bottom: 0;　/*　底面の値　*/
}

 /* TOPタイトルのCSSの例 */

 .article-title{
font-size:16px;
color:#666;
padding:5px 2px;
margin:1px 0px 8px;
}

 @media screen and (max-width: 768px){
.article-title{
font-size:9px;
line-height:16px;
}
}

※サムネイルなしだとレイアウトが崩れる（代替サムネイル適応で回避可能）
※CSSのタイトル設定の例の値は適当