Vaster2 デザイン

【Vaster2】リンクテキストの色やサイズなどを編集する方法

リンクテキストの色やフォントサイズを変更する方法をご紹介します。

※cssを変更しますので、変更前に必ずバックアップを取るようにしてください。

記事本文のリンクテキスト

記事本文中のリンクテキストの設定はcss内の以下の記述にあるのですが・・・

/*   リンク
----------------------------------------------- */
.post a{
   text-decoration:none;
color:#3366cc;
}
.post a:hover {
   text-decoration:underline;
   color:#3366cc;
}
.post a:visited{
color:#3366cc;
}

1つ目：.post a{}　・・・　通常の表示設定
text-decoration:none;　テキストの装飾はなし
color:　フォントの色

2つ目：hover　・・・　マウスを当てたとき
text-decoration:underline;　マウスを当てるとアンダーラインが表示される

3つ目：visited　・・・　訪問済のリンク

でも・・・ここを編集するとテンプレートのレイアウトが大きく崩れたりしますので・・・触らない方が無難かと思います。。。

サイドバーのリンクテキスト

サイドバーのリンクテキストは「人気記事のリンク」と「HTMLガジェットにリンクコードを書き込んだ場合」で設定の箇所が違います。

まずはHTMLガジェットに直接記述した場合のリンクテキストの設定ですが・・・
Vaster２にはデフォルトの設定コードが無いようで・・・
自分で書き込む必要があります。

とりあえず、人気記事のリンクデザインに合わせて統一感があるようなコードを作ってみました。
以下のコードをcss内の好きなところに貼り付けてください。
私はリンクの直下に貼り付けています。

/*  サイドバー リンク
----------------------------------------------- */
.sidebar a:link {
color:#666666;
}
.sidebar a:visited {
color:#666666;
}
.sidebar a:hover {
color:#008ec2;
text-decoration:underline;
}

※link（通常時）/visited（訪問したリンクの色）/hover（マウスを当てたとき）はこの順番に記述しないと正常に表示されません。

※このコードを追加するとサイドバーリンクの書式がすべて変わります。
ただし、人気記事のフォント色のみ変わってくれません。。。
理由は、人気記事のリンクのフォントカラーがCSS内の以下のコードに書かれているためです。

 <Group description="人気記事のリンク" selector=".popular-post">
<Variable name="popular.color" description="記事タイトルの色" type="color" default="#666666" value="#666666"/>
<Variable name="popular.color.hover" description="記事タイトルの色(カーソル時)" type="color" default="#008ec2" value="#008ec2"/>
</Group>

ですので、「サイドバーリンク」のフォント色を変える場合は「人気記事のリンク」のフォント色も同じように合わせてあげる必要があります。




最後にサイドバーリンクは以下のコードを組み合わせてアレンジが可能です。

sidebar a linkのアレンジコード

フォントサイズを指定したい場合
.sidebar {font-size:〇〇px;}

背景色を設定したい場合
background-color:色のwebコード;

例）マウスを当てたときに黒背景白文字にしたい場合・・・
.sidebar a:hover {
background-color:#000000;
color:#ffffff;
}

テキストにアンダーラインをつけたい場合

text-decoration:underline;

テキストのアンダーラインを外したい場合
text-decoration:none;

※色のwebコードは【原色大辞典】が参考になります。