ラベルにリンクをつけよう
Vaster2にはラベルにリンクがついていません。
このままでもいいかとは思いますが、今回、Vaster1.9のコードを参考に(記事ページの)ラベルにリンクをつけることにチャレンジしました。
HTMLの編集
HTMLを編集します。必ずバックアップを取ってから作業してください。
テーマ==>HTMLの編集から <b:loop values="data:post.labels" var="label">を検索します。(たぶん上から3個目)
こんなコードがあると思います。
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
</b:loop>
このコードを下記に変更しました
<b:loop values='data:post.labels' var='label'>
<a class='article-label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
コピペ用
<b:loop values='data:post.labels' var='label'>
<a class='article-label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
これでラベルにリンクがつきました
class='article-label'があるので .article-label をCSSに追記することで修飾が可能になります
今回はVaster1.9のコードをそのまま使ったのでarticle-labelとなっていますが、すでに使っていなければ他の文字でもOKです。
また class='article-label' はなくても大丈夫でした。
<b:loop values='data:post.labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
ラベルの文字色を変更
ラベルの文字色が変わってしまったので変更しました(色の変更はお好みで)
.post a や.post a:visitedを変えると、記事の中のリンクの色なども変わってしまうと思いますが(未検証)、article-labelなどのclassをつけていればCSSで修飾できます。
.article-label {}や.article-label a{} .article-label a:visited{} などを新規でCSSに記述すれば色が変わると思います。
ただ自分の環境では p.kousin a {}の色を変更したところ文字色が変わったので、Vaster2のカスタマイズしだいによって個別の調整が必要かもしれません。
最後に
素人なりにがんばりました。 Vaster1.9にはラベルにリンクがついていたので、Vaster1.9のコードを参考にしました。
expr:dir='data:blog.languageDirection'について、よくわかりませんでした。(文字の方向のこと?、左から読むか右から読むかのことかも)言語が日本語や英語ならばなくてもいいのかもしれませんがどうなんでしょう。
今回の変更ではトップページのラベルにリンクはつきません。いずれリンクをつけたいと思っています。
追記:トップページのラベルにもリンクをつけました。作業はちょっと面倒かもしれません。
コメントなし:
コメントを投稿