メニュー
» » »

Vaster2｜トップページのラベルにリンクを付ける方法。

みなさんこんにちはsoeパパです。
今回はVaster2のトップページの記事一覧のラベルについてのお話です。

Vaster2のトップページには最新記事が順に並んでいますが、記事にごとに設定したラベルも表示されていますよね？
表示されているだけでリンクとしては機能していないのですが、記事へのリンクを保ったままラベルはラベルへのリンクへとカスタマイズする事も可能なんです。

最後にちょっとした注意書きがあるので最後まで読んでから試してみてくださいね。

Vaster2トップページのラベルのコードを探す

記事一覧のラベルは各記事のサムネイルの右側にあるやつですね。
カスタマイズするにはまずはこのコードを探します。

「<p class='post-tag'>」で検索してください。
以下のコードが見つかると思います。
<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>
これがトップページの上のラベルのコードになります。
記事内のラベルの構造とほとんど変わりませんが、記事の方は<span>で囲われていました。こちらは<p>タグなので前後に改行が入ります。タイムスタンプとタイトルの間にちょっとスペースが空いていますね。

ラベルにリンクを追加する


<data:label.name/>の前後に<a>タグが必要になります。
<object class='tag-object'>
<p class='post-tag'>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<a class='taglink' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'>
<data:label.name/>
</a>
</b:loop>
</p>
</object>
赤文字のコードを追加してください。

「class='taglink'」
CSSで調整するためにクラス名を入れています。

「max-results=10」
ラベルのリンクをクリックしたときの1ページ中に表示する記事数の設定です。
10の部分を変更すれば表示数が変わります。

「<object>〜</object>」
記事内のラベルのカスタマイズと違い前後を<object>のタグで囲います。

<object>がないとどうなる？


記事内のラベルにリンクを付けるには必要がなかった<object>ですが、トップページのラベルの場合はどうしても<object>で囲う必要があります。そうしないと記事へのリンクそのものが崩れてしまうからです。
通常の場合のトップページの記事一覧のリンクです。枠のどこをクリックしても記事へジャンプしますよね。
ラベルにリンクを付けただけで<object>で囲わなかった場合はこうなります。
画像と日付をクリックすれば記事にジャンプしますがタイトルと本文の一部のところは無反応。<a>タグの中に<a>タグを入れた結果こうなりました。
<a href="記事へのリンク">
<アイキャッチのサムネイル>
<タイムスタンプ>
<a href="ラベルへのリンク"><ラベル></a>
<タイトル>
<記事内容の一部>
</a>
理想としてはこう作りたい。テンプレートも保存する事はできますが・・・。
<a href="記事へのリンク">
<アイキャッチのサムネイル>
<タイムスタンプ></a>
<a href="ラベルへのリンク"><ラベル></a>
<タイトル>
<記事内容の一部>
実際にページを読み込むとブラウザに成型され直されてしまい、記事へのリンクの</a>が移動させられてしまうようです。
<a href="記事へのリンク">
<アイキャッチのサムネイル>
<タイムスタンプ>
<object>
<a href="ラベルへのリンク"><ラベル></a>
</object>
<タイトル>
<記事内容の一部>
</a>
そこで<a>タグの中の<a>タグは<object>で囲むと機能するようになるという記事を書かれた方がいらっしゃったので参考にして試したら元のリンクを崩す事無くラベルにリンクをつけれるようになりました。

参考：aタグの中にaタグを書きたい時のtips
https://qiita.com/fukamiiiiinmin/items/7412b21c6df5de31cab1

Vaster2のobjectはdisplay:block


Vaster2はCSSでobjectにdisplay:blockなるようにしているのでinlineに変えてあげないとレイアウトが少し崩れます。

初期状態ではタイムスタンプの右側にラベルが入るようになっていますが、display:block
の場合強制的に改行してしまうのでinlineに変えてあげましょう。
.tag-object{
display:inline;
}
こちらをCSSに加えて下さい。
tag-objectというクラス名を付けているのでラベルの部分の<object>のみがinlineにかわります。これでレイアウトも元のままです。

ラベルのリンクの色を変更する

ラベルにリンクがつくと文字の色もリンクの色になってしまいます。Vaster2は青いバックなので同化して全然見せませんね。もとの白文字に戻すCSSが必要です。

記事内のラベルの記事を先に読まれてカスタマイズされている場合は同じ作業になりますので必要ありません。

taglinkというクラス名を使ってCSSでカスタマイズします。
まず「.post-tag」を検索します。
.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}
これはラベルのCSSなのでカスタマイズするわけではありません。
わかりやすようこの下に追加します。
a.taglink:link{color:#fff;}/*未訪問リンクの色を白に*/
a.taglink:visited{color:#fff;}/*訪問済リンクの色を白に*/
a.taglink:active{color:#fff;}/*クリックして離されるまでのリンクの色を白に*/
a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
}
上記のコードを追加します。
これでラベルの文字色は常に白になるようにカスタマイズされました。

どのラベルを選択しているかわかりやすくする


マウスオーバーで下線を出す

先ほど追加したCSSだとマウスオーバーした時にでる下線も消しています。どのラベルを選択しているのかなんとなくしかわからないのでクリック間違いも起こるかもしれません。
a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
}
追加したCSSの「text-decoration:none;」を削除するとマウスオーバーした時に下線が出るようになります。下線が欲しい人は変更しましょう。

マウスオーバーで背景色を変える

下線ではなくマウスオーバーで背景色を変えるとちょっとかっこいいですよね。
a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
background:#00bfff;/*カーソルがのった時の背景の色*/
}
a.taglink:hoverに赤文字の行を追加してください。
マウスオーバーで背景色が変化するようになりました。

まとめ


トップページの記事一覧のラベルをリンク機能させるために<object>を使っているのですがそれが構文的に正しいのかは私の理解力でははっきりわかりませんでした。参考にさせていただいた記事でも、文章の構造的にも意味不明になるのであまりオススメしませんとも言われてるので心配な方は無理に試さなくてもいいかもですね。

ですが便利になりますしこれくらいは気にしなくてもいいのかなとも思います。

今日のお話はここまで！
それではまたお会いしましょう〜
Vaster2 カスタマイズ
TOP