人気ブログランキング | 話題のタグを見る
マイスキン試行錯誤その11
☆文字スタイルやリンク文字を好きな色に変えよう☆
苦労の甲斐あって、ほぼ自分の思い描いていた通りにカスタマイズも進み、後は文字スタイルやリンクの色など細かいところを直して無事マイスキン第1号完成♪
あまりよくわからないながらも、タグ辞典片手にCSSいじる作業はかなり楽しく、やみつきになりそうです。
楽しかったあまりに、ブログ始める前はまったく予定していなかったマイスキン講座(?!)なんかを無謀にもやってしまいましたが(笑)こんな素人丸出しのつたない説明でも参考に見に来て下さった方もいらっしゃったようで、ありがとうございました♪
スキンいじりについて書くのはこれにていったん終了とし、今後は本来やる予定だったコンテンツをシコシコ埋めていきたいと思います。
半年後くらいにまたマイスキン第2弾に挑戦したいと思ってるので、その時また何か新しい技を試してみたら、ここで紹介するつもりです☆

これだけじゃなんなので、最後に基本中の基本、
文字スタイルとリンク文字の設定の方法。

CSSソースの頭の方の
BODY,TD,DIV,LI { ~ }
の部分で、基本的な文字スタイルを指定しています。
同じくその下の
A:LINK { ~ }
A:VISITED { ~ }
A:ACTIVE { ~ }
A:HOVER { ~ }

の部分で、基本的なリンクスタイルを指定しています。
クラス単位など、個別に他のスタイルを指定しない限りはここで指定したスタイルが適用されます。
例えば、タイトルロゴの下のURLの文字スタイルとリンクスタイルを変更したい、という場合は
DIV.URL { FONT : ~ }
DIV.URL A:LINK { ~ }
DIV.URL A:VISITED { ~ }
DIV.URL A:ACTIVE { ~ }
DIV.URL A:HOVER { ~ }
と書き加えればOKです(URLはデフォルトでも別指定になってますが^^;)

それぞれの説明。
{ FONT : 文字サイズ 書体名 etc; COLOR : 文字色; 他指定 }
他指定の部分は、
マージン(他のクラスとの余白)を取りたいなら MARGIN : ~PX;
枠から文字の余白を取りたいなら PADDING : ~PX;
枠線で囲みたいなら BORDER : ~;
右詰・左詰・センター表示にしたいなら TEXT-ALIGN : (RIGHTまたはLEFTまたはCENTER);
文章の行間を広げたいなら LINE-HEIGHT : ~%;
背景色をつけたいなら BACKGROUND-COLOR : ~;
などなどを必要なだけズラズラッと並べてください。
本文など、文章が長くなる部分は行間を広げるのがオススメです。
読む人の目に優しいのはだいたい120%~150%くらいだそうです(ここでは120%)。

リンクスタイルは、それぞれ
A:LINK・・・まだクリックしてない(未訪問)リンク文字の色
A:VISITED・・・クリック済み(訪問済み)のリンク文字の色
A:ACTIVE・・・クリック中状態のリンク文字の色
A:HOVER・・・リンク文字にマウスが触れたときの色
で、以降 { ~ } の中でスタイルを以下のように設定します。
文字色指定は COLOR : ~;
下線をつけるかつけないかは TEXT-DECORATION : (NONEまたはUNDERLINE 指定しなければ下線がつきます);
他、今回ここではやってないけど、カーソルの形を変えたり背景色を入れたりクリックしたときにボタンのようにポチッと凹んだりなど、ここでいろいろ指定できます。

カラーコードは、私はこちらを参考にしています
「TAG index/カラーチャート - ホームページ制作情報」

最後に・・・。
せっかくスキンをきれいにカスタマイズしても、記事を投稿する際の基本的な注意点を忘れてはいけませんです。
機種依存文字を使ってはダメですよ~!
自分のブラウザでは正しく表示されても、他のブラウザやOSで見ると文字化けして何が書いてあるんだかわからない、という状態になってしまう恐れがあります。
特に丸囲み数字を使ってる人をよく見かけるので・・・。
詳しくはこちらで解説されています→「機種依存文字劇場」
by kaokaopon | 2004-08-13 01:45 | SKIN
<< 夏はナンパの季節だね♪(笑) ↑ページTOP 習慣性流産~1st stage~2 >>



KAOと旦那と3匹の猫のたわむれの日々。家に引きこもってるのでネタがありません。最近猫日記となりつつあります(笑)。
by kaokaopon
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
全体
BBS
雑記
プレマタ
入院日記


観た
読んだ
作った
お取り寄せ
レシピ
SKIN
BLOG
WEB
日々。
ABOUT
以前の記事
2010年 10月
2010年 04月
2009年 08月
2009年 01月
2008年 10月
2008年 07月
2008年 06月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月
2005年 03月
2005年 02月
2005年 01月
2004年 12月
2004年 11月
2004年 10月
2004年 09月
2004年 08月
フォロー中のブログ
食卓から愛をこめて
* もなこの手づくり石け...
だって私はドラマ好き♪
ベジタリアンの厨房
気ままな星遊び
笑門来福
pumilus sapo
母ちゃんちのご飯
***いつか出会えるあな...
茶タローくぅぅぅん.2
ほんの小さな庭
***やっと出会えたあな...
ゆっくりのんびりいこうじ...
ライフログ
タグ
(92)
(77)
(22)
(15)
(6)
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧