Bloggerカスタム

【vaster2】ラベルにリンクを付けて色もカスタマイズ

Bloggerでは「ラベル」という機能があります。


他のブログではには「カテゴリー」や「タグ」に当たるものです。
皆様はそこをクリックかタップすることで、そのカテゴリ一覧に飛ぶイメージがありませんか？

私は最近までラベルには当たり前にリンク機能が付いていると思い込んでいました。

しかし、無い。

気付いた時に最初は本気で「アレ？」となりました。

色々見て回ったら、Bloggerの標準機能にはあるのにvaster2には無いんですね。

PCならサイドバーにラベル一覧が表示してあるのでまだしも、スマホでは記事ページのだいぶ下まで読んでいただかないと表示されません。


じゃあ不親切だと思われる前に急いで作らねば！と思った次第です。

ラベルにリンク機能を付ける

「テーマ」→「HTMLの編集」より、「Ctrl+Fキー」で検索窓を出し

「<!--この真下にアドセンスを挿入  記事中-->」と検索して下さい。
そのちょっと上にある、

<b:loop values='data:post.labels' var='label'>

<data:label.name/>

</b:loop>

この部分が目的の場所です。
同じコードがその上にもありますので間違えないよう注意してください。

ここにコードを追加します。

<b:loop values='data:post.labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"' class='taglink'>
<data:label.name/>
</a>
</b:loop>

追加するのは赤字の部分です。

コードを追加した画像です。下線部分ですね。

「テーマを保存」で、記事ページのラベルからリンクで飛べるようになっていると思います。

※記事一覧のページではリンクはありません。記事一覧ページの部分にも同じコードを加えると、タイトルと説明文からの記事リンクが消えてしまいます。

とりあえずこれでちゃんと動作するか試してみると…

機能はしたものの、リンク部分の文字色が変わってしまい、デフォルトの色では非常に見辛い…

しょうがない、ラベルの色も変えましょう。

ラベルの背景色とリンク文字色を変更する

リンク文字は一括で変更すると本文中のリンク文字色まで変わってしまいますので、ラベルの部分だけ変更します。

まず記事ページだけでなく、トップの記事一覧のラベル表示部分にも変更が及ぶようにします。

「<b:loop values='data:post.labels' var='label'>」で検索して出てくる先程いじってない方に今度は追加します。

<b:loop values='data:post.labels' var='label'>

<data:label.name/>

</b:loop>

ここに、

<b:loop values='data:post.labels' var='label'>
<span class='taglink'>
<data:label.name/>
</span>
</b:loop>

赤字のコードを追加します。


次に、「.post-tag{」で検索します。

この部分でラベルリンクの設定をします。
vaster2でも、「background」や「color」の表記が少し違う場合があるようです。

最後の「}」の後ろに、

a.taglink:link{color:white;}
a.taglink:visited{color:indigo;}

の２行を付け足します。
・上が「リンクの文字色」
・下が「訪問済みリンク文字色」です。

ラベルの背景色は、「background:」以降に色を直接指定して変更します。最後の「;」を忘れないように。

下線部分が変更したところです。

私は、「リンク文字色」はwhite、「訪問済みリンク文字色」はindigo、「背景色」はsteelblueにしました。

もちろん、これは私の好みですので皆様それぞれ好きな色でカスタムしてください。

色見本のHPリンクも貼っておきます。
ブログページの背景が白の場合、見本より少し鮮やかに見えると思いますのでそこも考えながら調整してみてください。

満足する色になりましたら最後に「テーマの保存」で完成です。


この記事のコード等は父ちゃんの日々ログさんを参考にさせていただいてます。ありがとうございます。

スポンサーリンク

　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事