リンク部分の文字色を変える
~まずやってみよう~
※共有テンプレート「asagi-simple01」を使った例です。
スタイルシートで↓の部分をさがす。(上のほうにあります。)
/* リンクの設定 ------------------------------------------ */ a {color : #3300cc;text-decoration : none;} a:hover { color : #660099;text-decoration : underline;}
赤い文字の部分を9900ff、青い文字の部分をCC3333に書き換えて、プレビューを押して下さい
~解説~
本文中と、両サイドのカラム内の(他のリンク部分については後ほど説明します)、リンク文字が紫色に、カーソルを当てると文字色があずき色になりますか?
a {~} リンクのある箇所の指定
a:hover {~} カーソルを当てた時の指定
{~}の中をスタイルシートで指定することで、該当箇所が変化します。
色を変えるには、colorを指定します。色についてはこちらを参考にして下さい。
このテンプレートでは使用していませんが、下記を追加することでさまざまな変化させることもできます。
a:link {~} 未閲覧のリンク部分の指定
a:visited {~} 閲覧済のリンク部分の指定
a:active {~} リンク部分をアクティブ状態にした時(クリックした時)の指定
また、「text-decoration」の部分で文字の変化を指定できます。一例をあげておきます。
none 指定なし
underline 下線
overline 上線
line-through 打ち消し線
★このテンプレートでは、リンク部分の色を個別に指定している箇所があります。(ブログタイトル・記事タイトル・記事右下)
これらの箇所の色を変えるには、↓の部分を変更して下さい。
/* タイトル・サイトの説明部分の設定 ------------------------------------------ */ /* タイトル */ ~中略~ .blogtitle a {font-weight : bold;color : #333333;text- decoration : none;} .blogtitle a:hover {font-weight : bold;color : #333333;text-decoration : none;} ~中略~ /* 中央カラム(Primary-Column)の設定 ------------------------------------------ */ ~中略~ /* 記事のタイトル部分 */ ~中略~ .entry-header a {color : #333333;text-decoration : none;} .entry-header a:hover {color : #333333;text- decoration : underline;} ~中略~ /* フッター部分(コメントやトラックバックなど) */ ~中略~ .entry-footer a {color : #333333;text-decoration : underline;} .entry-footer a:hover {color : #333333;text- decoration : none;}