TwentyTen サイト全体のリンク色の設定/変更

TwentyTenは、デフォルトでもしっかりと細かくリンク色については設定がなされています。そのままの設定でも何の問題もありません。

リンクの色を変えたい、マウスオーバー時の色を変更したい、そんな方は参考にしてみて下さい。それでは、スタイルシートから以下の部分を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを変更して下さい)

textarea {
	background: #f9f9f9;
	border: 1px solid #ccc;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	padding: 2px;
}
a:link {                      
	color: #0066cc;      /* リンク色の設定 */
}
a:visited {
	color: #743399;      /* リンクをクリックした後の色の設定 */
}
a:active,
a:hover {
	color: #ff4b33;      /* クリックした瞬間のリンクの色・マウスオーバー時のリンク色の設定 */
}

/* Text meant only for screen readers */
.screen-reader-text {
	position: absolute;
	left: -9000px;
}

/* =Header
-------------------------------------------------------------- */

赤い文字のところのカラーコードを変更すると、リンク色が変更されます。

カラーコードの簡単な取得方法は、コチラに書き残してあります。
カラーコード(色コード)の超簡単取得方法

これでお好みのリンク色に変更が出来ました!!

WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術
WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術

 

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です