現在、Movable Typeで新たなブログ作成中です。phpベースのwordpressとは勝手が違いますね、やっぱり。
カスタマイズしやすい部分もあれば、しにくい部分もあり、一長一短という感じ。
いろいろとブログの構成は違っているのですが、スタイルシート（CSS）の構成に関してはどっちも一緒ですね。
ブログのデザインを考える際に、このスタイルシートの構成に手をつけるのは、どんなブログでも避けられないですね。
このブログではリンクのカラーもタイトルも赤を選択して、白のバックグラウンド（背景）に赤、という色を基調にしています。
さて、このフォントカラーやリンクカラーを制御しているのは、CSSというスタイルシートです。
ここでは、文字色の変更方法や、リンクの色、クリックした時に色を変更させる方法などを紹介してみたいと思います。
まず、CSSに何らかの手を加える際は必ずバックアップを取るようにしておきましょう。コピペでもファイルをコピーでもなんでもいいので、とにかく取っときましょう。ここでブログ全体のデザインを制御しています。万一、デザインが崩れて、コピーを残してない場合、元に戻せなくなりますんで。
まあ、わかりきったことではありますが、大事なことなんで何度でも書いた方がいいですね、こういうことは。
さて、バックアップを取ったら、実際に文字色の変更に着手してみましょう。
スタイルシートの中で、文字の色を管理するコードは、以下のようなコードです。
ますがこれらのコードを探してみましょう。
a{}
a:link{}
a:visited{}
a:active{}
a:hover{}
これらのコードはだいたい、以下のように記述されています。
a:link {
color: #0000FF;
}
{}の間にcolor:カラーコードの形で指定します。
お使いのテンプレートによっては、上記のいくつかは無かったりもします。あったりなかったりでリンクの挙動が変わります。
以下、１個ずつ説明します。
- a:link{}…リンクの色を指定しています。
- a:visited{}…一度クリックしたリンクの色を指定しています。
- a:active{}…クリック瞬間のリンクの色をしています。サイトによっては、クリックすると色を濃くなるような設定をしているものがありますが、このコードで制御してます。
- a:hover{}…マウスポインタがリンクに触れた時のリンクの色を指定しています。この文字列はリンクだよ、ということを視覚的にわかりやすく表現するためにマウスが、文字列の上に乗っかると色が変わる仕掛けはここで作ります。
検索エンジン、Googleではリンクの色を#0000FFにしています。一度クリックされたリンク（a:visited{}）は#810099ですね。
ちなみにa:active{}はクリックしても変化ないので、なにも仕込んでいないと思われます。これを仕込んでおくと何となくクリックした人がクリックしたぜ！という気分になりますので、仕込んでみても面白いと思います。
a:hover{}は仕込んでおいた方がいいと思います。ブログによってはリンクの色と同じカラーのフォントを単に強調のために使っている場合もありますので、これは強調じゃなく、リンクだよ、というのをわかりやすく読者に見せるためには、hoverは効果的だと思います。
このブログだと、マウスとリンクに載せるとちょっと濃い赤にするようにしてます。
一般的には青リンクがマウスが触れると赤いに変化するなんてのがありますね。
※カラーを変化させる意外にも、マウスが触れると下線を出したり、引っ込めたりというやり方もできますよ。
その場合は、text-decoration:を{}の間に追加しましょう。
いろんなアクションがありますが、代表的なのは、以下の５つ。
- none…テキストに線は付かず、点滅もしません。逆にリンク（a:link{}）にunderlineを設定して、a:hover{}にnoneを設定すればマウスが触れた時に下線が消えるというアクションを作れます。
- underline….テキストに下線が付きます。
- overline…テキストに上線が付きます。
- line-through…テキストに打ち消し線が付きます。
- blink…テキストが点滅します。（chromeやsafari、IEはこのアクションをサポートしてませんのでオススメじゃないです）
いろんな、やり方がありますので、いろいろ試してしっくりくる方法を模索してみてください。
完成予想図はこんな感じですかね。
[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”]a {
color: #0000FF;
}
a:link {
color: #0000FF; text-decoration: underline;
}
a:visited {
color: #810099;
}
a:hover {
text-decoration: none;
}[/css]
このコードは、以下のブログでの設定しております。
http://enter.hotakasugi-jp.com/
エムディエヌコーポレーション
売り上げランキング: 71818