トップページのラベルにリンクをつけました
リライトしました。
記事のラベルにリンクを付けた時と、同じようにコードを追加すれば、トップページのラベルにもリンクがつきました。
sutasutashiki.blogspot.comただ、トップページの個別記事をクリックするところで、サムネイル画像にしか、リンクがつかなくなってしまいました。（ブラウザの解釈らしいです）
なので、記事タイトル、スニペット（要約）の部分にもリンクをつけたいと思います。
（サムネイル画像の部分も”ブラウザの解釈”に頼るのではなく、あらためてリンクをつけます。）
大まかな作業手順としては、ラベルにリンクをつける（+CSSの追加）、サムネイル画像にリンクをつける、記事タイトル・スニペットにまとめてリンクをつける。の 3工程です。
あくまでも素人の作業です。リンクをつけることを主目的にしました。他にもっといいやり方があると思いますが、これが精一杯でした。
一応ですが、デフォルトテンプレートでの動作を確認しました。
HTMLを編集します。必ずバックアップをとってから作業してください。また、この変更に正確性がないことに留意してください。
全体像
変更したところの全体像です。面倒でしたら以下の作業手順を読まなくても、これをコピペすればある程度はいけるはず。
class='article-label' の分のCSSが必要になると思います。
また、今回の作業とは直接関係ないと思いますが、デフォルトテンプレートの1364行目にあった<!--公開日を表示-->の文字は消してあります。
<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {"index", "archive"}'>
<div class='article-list'>
<a class='article-list-link' expr:href='data:post.url'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
</a>
<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 = "<data:post.dateHeader/>"</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'>
<a class='article-label' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
</p>
<a class='article-list-link' expr:href='data:post.url'>
<h2>
<data:post.title/>
</h2>
<p class='snippet'>
<data:post.snippet/>
</p>
</a>
</div>
<div style='clear:both;'/>
</div>
<!--TOP カテゴリ アーカイブここまで-->
デフォルトテンプレートに上記のコードをコピペしたときはこんな感じになります。
ラベルにリンクを付ける
[テーマ]-[HTMLの編集]。CTRL+Fで<data:label.name/>を検索します。
5つあるうちの上から2つ目にこんなコードがあります。デフォルトテンプレート1350行目あたり
<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>
このなかの <data:label.name/> を
<a class='article-label' expr:href='data:label.url'> と </a> ではさみます。
<p class='post-tag'>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<a class='article-label' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
</p>
これでラベルにリンクがつきます。
あとでリンクの色とかかえたいのでclass='article-label'をつけました。
参考サイト
Vaster2のラベルのデザインを変えてみよう！コピペでOK！ - 父ちゃんの日々ログ
サムネイル画像にリンクをつける
<!--TOP カテゴリ アーカイブの時--> の下にある
<a class='article-list-link' expr:href='data:post.url'> と、<!--TOP カテゴリ アーカイブここまで--> の上の </a> を移動させます。デフォルトテンプレートだと1324行目と1371行目
元コード
<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {"index", "archive"}'>
<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>
移動させる </a> の場所
<div style='clear:both;'/>
</div>
</a> ←"これ”
<!--TOP カテゴリ アーカイブここまで-->
ここに移動させる
<div class='article-list'> の下に <a class='article-list-link' expr:href='data:post.url'> を移動
</b:if> の下に </a> を移動
<!--TOP カテゴリ アーカイブの時-->
<b:if cond='data:blog.pageType in {"index", "archive"}'>
<div class='article-list'>
<a class='article-list-link' expr:href='data:post.url'>
<b:if cond='data:post.firstImageUrl'>
<div class='article-thumbnail'>
<img expr:src='data:post.firstImageUrl'/>
</div>
<b:else/>
</b:if>
</a>
これでサムネイル画像にリンクがつきます。
記事タイトル・スニペットにまとめてリンクを付ける
サムネイル画像リンクをつけた時に使った <a class='article-list-link' expr:href='data:post.url'> と </a> を流用します。
貼り付ける位置は <a class='article-list-link' expr:href='data:post.url'> が <h2><data:post.title/></h2> の上、
</a> が <p class='snippet'><data:post.snippet/></p> の下です。
<a class='article-list-link' expr:href='data:post.url'>
<h2>
<data:post.title/>
</h2>
<p class='snippet'>
<data:post.snippet/>
</p>
</a>
</div>
<div style='clear:both;'/>
</div>
</a>
<!--TOP カテゴリ アーカイブここまで-->
これで記事タイトル・スニペットにまとめてリンクがつきます。
（デフォルトテンプレートにあった<!--公開日を表示--> の文字は消してあります。）
補足
素人ながら、デフォルトテンプレートのコードを見ると、上からサムネイル画像、日付、ラベル、記事タイトル、スニペットの順に並んでいて、これらをひとかたまりにしてaタグでリンク（記事ページに移動）が設定されているようです。
このままラベルにリンク（ラベルに移動）をつけるということは、aタグのなかにaタグをいれることになり、これが今回の原因のようです。
さらに調べると、非推奨のようですが ラベルにつけた aタグを objectタグではさめば、今回のようにサムネイル画像、記事タイトル・スニペットにあらためてリンクをつけなくても大丈夫そうです。（未検証）
<p class='post-tag'>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<object><a class='article-label' expr:href='data:label.url'>
<data:label.name/>
</a></object>
</b:loop>
</p>
コメントなし: