すたすた式
Vaster2
リライトしました。
記事のラベルにリンクを付けた時と、同じようにコードを追加すれば、トップページのラベルにもリンクがつきました。
[Vaster2]記事ページのラベルにリンクをつけました | すたすた式
ただ、トップページの個別記事をクリックするところで、サムネイル画像にしか、リンクがつかなくなってしまいました。（ブラウザの解釈らしいです）
なので、記事タイトル、スニペット（要約）の部分にもリンクをつけたいと思います。
（サムネイル画像の部分も”ブラウザの解釈”に頼るのではなく、あらためてリンクをつけます。）
大まかな作業手順としては、ラベルにリンクをつける（+CSSの追加）、サムネイル画像にリンクをつける、記事タイトル・スニペットにまとめてリンクをつける。の 3工程です。
あくまでも素人の作業です。リンクをつけることを主目的にしました。他にもっといいやり方があると思いますが、これが精一杯でした。
一応ですが、デフォルトテンプレートでの動作を確認しました。
HTMLを編集します。必ずバックアップをとってから作業してください。また、この変更に正確性がないことに留意してください。
変更したところの全体像です。面倒でしたら以下の作業手順を読まなくても、これをコピペすればある程度はいけるはず。
class='article-label' の分のCSSが必要になると思います。
class='article-label'
また、今回の作業とは直接関係ないと思いますが、デフォルトテンプレートの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/>を検索します。
<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> ではさみます。
<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！ - 父ちゃんの日々ログ
Vaster2のラベルのデザインを変えてみよう！コピペでOK！地元大川市を中心とした、柳川、八女、大牟田、筑後、佐賀市などのおすすめスポット紹介しております。
Vaster2のラベルのデザインを変えてみよう！コピペでOK！
地元大川市を中心とした、柳川、八女、大牟田、筑後、佐賀市などのおすすめスポット紹介しております。
<!--TOP カテゴリ アーカイブの時--> の下にある
<!--TOP カテゴリ アーカイブの時-->
<a class='article-list-link' expr:href='data:post.url'> と、<!--TOP カテゴリ アーカイブここまで--> の上の </a> を移動させます。デフォルトテンプレートだと1324行目と1371行目
<a class='article-list-link' expr:href='data:post.url'>
<!--TOP カテゴリ アーカイブここまで-->
<!--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'> を移動
<div class='article-list'>
</b:if> の下に </a> を移動
</b:if>
<!--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> の上、
<h2><data:post.title/></h2>
</a> が <p class='snippet'><data:post.snippet/></p> の下です。
<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>
aタグの中にaタグを書きたい時のtips
aタグの中にaタグを書きたい時のtips - Qiita
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿