テキストリンクの色と装飾を変更する

 テキストリンクとは、短い文章や単語をクリックすることで別のページに移動するように設定されているものをいいます。

例:トップページへのテキストリンク

 通常(スタイルシートで何も設定されていない場合)は、青色の文字でアンダーラインが装飾されています。(訪問済みのテキストリンクは紫っぽい色でアンダーラインが装飾されています)

 テンプレート「若草」の初期設定では、文字色が赤みがかったダークグレーで、装飾にアンダーラインが引かれています。

  1. テンプレート「若草」の初期設定を解除する
  2. 装飾を加える(font-decoration、未訪問と訪問済み、オンマウスオーバーなど)
  3. 記事内のテキストリンクのみを設定する場合

準備
SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「スタイルシート」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。
CSSnyuuryoku.gif

1.テンプレート「若草」の初期設定を解除する

スタイルシート セレクタ 『a』(アンカー) の部分を変更することでテキストリンクの設定を変更します。
変更前
a{  ←セレクタ名「a」 (リンクのスタイルシートを設定)
text-decoration: underline;  ←文字装飾:下線
color:#513E19;  ←文字色:「#513E19」(赤みがかったダークグレー
}
変更後
【 a{ } の項目をすべて削除 】

a{} の部分のスタイルシートを削除することでテキストリンクのスタイル設定がなくなります。

スタイル設定がない場合は、青色の文字とアンダーライン(未訪問時)になります。

2.装飾を加える

文字装飾は上記のアンダーライン以外にもいくつかあります。
text-decorationの値の種類
text-decoration: none;   ←文字装飾:無し
text-decoration: underline;   ←文字装飾:下線
text-decoration: overline;   ←文字装飾:上線
text-decoration: line-through;   ←文字装飾:打ち消し線



未訪問時、訪問済み、オンマウスオーバー、クリック時で表示されるテキストリンクに変化を加える方法

 このページでは設定していませんが、変更前、変更後と変更後のサンプルを以下に説明します。
変更前

a{  ←セレクタ名「a」 (リンクのスタイルを設定
text-decoration: underline;  ←文字装飾:下線
color:#513E19;  ←文字色:「#513E19」(赤みがかったダークグレー)
}
変更後
a:link{  ←セレクタ名「a:link」 (リンク[未訪問]のスタイルを設定)
text-decoration: underline;  ←文字装飾:下線
color:#0000ff;  ←文字色:「#0000ff」(青)
}

a:visited{  ←セレクタ名「a:visited」 (リンク[訪問済み]のスタイルを設定)
text-decoration: overline;  ←文字装飾:上線
color:#ff0000;  ←文字色:「#ff0000」(赤)
font-style:italic;  ←文字のスタイル:イタリック(斜体)
}

a:hover{  ←セレクタ名「a:hover」 (リンク[オンマウスオーバー]のスタイルを設定)
text-decoration: line-through;  ←文字装飾:打ち消し線
color:#ffcc00;  ←文字色:「#ffcc00」(オレンジ)
background:#ffffcc;  ←背景色:「#ffffcc」(薄い黄色)
}

a:active{  ←セレクタ名「a:active」 (リンク[アクティブ]のスタイルを設定)
border:1px solid #000000;  ←枠線:1ピクセル 実線 黒
background:#ffffff;  ←背景色:「#ffffff」(白)
color:#33cc00;  ←文字色:「#33cc00」(緑色)
}

a{ } の1項目の代わりに a:link{ } 、a:visited{ }、a:hover{ }、a:active{ } の4項目を設定します。
もちろん、設定しない項目は記載する必要はありません。

また、a:hover,a:active{ } のように複数のセレクタを同時に設定することも可能です。

オンマウスオーバーとは、マウスのカーソルをテキストリンクの上に合わせた状態を言います。

アクティブとは、マウスをクリックしている状態などの場合です。

変更後のサンプル

3.記事内のテキストリンクのみを設定する場合

 記事内のスタイルシートを設定しているセレクタは【.blogbody】です。

 テキストリンクのスタイルシートの変更のみの場合は.blogbodyの{}内の記述を特に変更する必要はありません。

.blogbody{}のほかに、.blogbody a{}や、.blogbody a:visited{}といった形で書き足すことで記事内のテキストリンクのみを設定することができます。
変更前
.blogbody {  ←セレクタ名「.blogbody」 (記事内のスタイルを設定)
margin:0px;
padding:0px;
}
上記の部分は特に変更する必要はありません。
変更後
.blogbody {  ←セレクタ名「.blogbody」 (記事内のスタイルを設定)
margin:0px;
padding:0px;
}

.blogbody a:link,.blogbody a:visited{  ←(記事内の「アンカー(未訪問)」と「アンカー(訪問済み)」のスタイルを設定)
text-decoration: underline;  ←文字装飾:下線
color:#0000ff;  ←文字色:「#0000ff」(青)
}

.blogbody a:hover,.blogbody a:active{  ←(記事内の「アンカー(オンマウスオーバー時)」と「アンカー(アクティブ時)」のスタイルを設定)
color:#ffffff;  ←文字色:「#ffffff」(白)
background:#000000;  ←背景色:「#000000」(黒)
}
変更後のサンプル
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。