アメブロテンプレートカスタムpartⅡ

カスタム可能なテンプレートを使って簡単なカスタムを紹介します

今回は、メイン記事とリンクの文字スタイル変更です

前回の変更がまだの方は↓

メイン記事タイトルを目立たせる方法

まずは、CSS編集画面を開いてください

32行目から変更します

/* (1-1) 全体の文字

--------------------------------------------*/

/* 通常文字 */

.skinTextColor,.skinBaseTextColor,.skinBlock,body{

color:#333333;

}

/* リンク */

.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{

color:#0066cc;

}

/* 訪問済のリンク */

.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{

color:#996699;

}

/* マウスオーバーしたときのリンク */

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{

color:#ff3366;

}

/* 弱い文字 （日付など）*/

.skinWeakColor,.skinBaseWeakColor{

color:#999999;

}

/* 強い文字 （NEW! 更新!など）*/

.skinStrongColor,.skinBaseStrongColor{

color:#ff3399;

ここまで変えます

まずは記事の基本文字カラーから

何か韓国のグループみたいな言い回しですね＾＾

ここを別ウィンドウであけておいてください⇒WEB色見本

/* 通常文字 */.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}
ここが変更箇所です

デフォルトは濃いグレーです

このままでもOKな方は飛ばしてください

好みにもよりますが黒にすることをお勧めします

コードは#000000か#000です

次はリンクカラーです

/* リンク */

.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{

color:#0066cc;

}

/* 訪問済のリンク */

.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{

color:#996699;

}
ここが変更箇所です

リンクと訪問済みで色が変えてありますがお勧めは同一色の方がいいです

基本的にリンクカラーはブルー系がよく使われています

#0000FF か#002AFFあたりがおすすめです

次はここです

/* マウスオーバーしたときのリンク */

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{

color:#ff3366;

マウスオバーとはマウスポインターが乗った時のことです

設定の仕方としてはリンクと全く違うカラーにするか

同一色を薄くするです

お好みでOKです

WEB色見本で確認しながら変えてください

最後はこの2か所です

/* 弱い文字 （日付など）*/

.skinWeakColor,.skinBaseWeakColor{

color:#999999;

}

/* 強い文字 （NEW! 更新!など）*/

.skinStrongColor,.skinBaseStrongColor{

color:#ff3399;


弱い文字はグレーぽいシルバーで設定されています

デフォルトでもOKですがあえて変えるなら#C71585あたりですかね

tukasaの好みにすぎませんが


強い文字はこのままでOKです

ピンクが設定されています

サンプルタグ

/* (1-1) 全体の文字

--------------------------------------------*/

/* 通常文字 */

.skinTextColor,.skinBaseTextColor,.skinBlock,body{

color:#000;

}

/* リンク */

.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{

color:#0000FF;

}

/* 訪問済のリンク */

.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{

color:#0000FF;

}

/* マウスオーバーしたときのリンク */

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{

color:#19D8FF;

}

/* 弱い文字 （日付など）*/

.skinWeakColor,.skinBaseWeakColor{

color:
#C71585 ;

}

/* 強い文字 （NEW! 更新!など）*/

.skinStrongColor,.skinBaseStrongColor{

color:##ff3399;

以上です


おまけのCSS

リンクはもう一つ設定できます

アクティブ状態のカラー設定です

タグを書いておきます

/*リンクアクティブ*/

.skinAnchorActiveColor,.skinBaseAnchorActiveColor,.
skinBlock a:focus,.skinBlock a:
active r,a:active ,a:active{

color:ここに＃好きなカラー;

}

TUKASAYOUのwodrpressブログではさらにためになる

レポートがたくさんあります訪問してくださいね

wodrpress0円で始める

おまけでした