Facebook
RSS Feed
Feb 7, 2012

WordPress初心者講座・Q&A:リンク文字色・text-decorationの変更方法

Minimal WPのテーマは基本的にHTMLが分からなくてもオリジナルサイトが作れますが、
さらにさらにカスタマイズしたい!という時に必要になってくる技術を、
このブログでは随時解説していきます。
めーーーーーーっちゃんこ初心者向けの内容をひたすらやりますので、
そんなん知ってるわーっていう人はすっ飛ばして、また明日ご訪問ください!

本日のテーマは「リンク文字色・リンクデコレーションの変更方法」です。

これは昨日の文字色の変更とまったく同じですね。
スタイルシートのリンクの部分を変更します。あら、簡単。
忘れちゃった人は復習すると良いよ。

【関連記事】WP初心者講座:文字色・文字サイズの変更方法

 

リンク文字色の変更

ダッシュボード>外観>テーマの編集>スタイルシート

*テーマファイルをいじる時は必ずメモ帳とかにバックアップを取って、失敗しても戻れるようにしてくださいよ!

/* リンク */

a{
color:#45AAB8;
text-decoration:none;
}
a:hover{
color:#666;
}

色の変更は前回とおんなじです。

「color:#45AAB8;」

この数字を変えるだけです。

で、ここで問題が発生。
なんか二つあるやないかなー!どっちを触ればいいんじゃーって話ですよね。

「a{」の方がリンクされてる文字の色。
「a:hover{」の方がリンクをマウスオーバーした時の文字の色。

ってことです。
マウスオーバーってのはその名の通り、マウスをリンクの上に載っけた時のことです。
それ以外にも基本はいくつかあるんですが、知っててもロクな事が無いので無視します。
この2つだけ覚えればOK!

 

text-decorationの変更

続きまして、リンク色じゃなくて、装飾自体を変える方法です。
だいたいインターネットの基本として、リンクには下線がひいてありますよね?ひいてないですか?
最近はあんまりないかもしれませんが、青文字で下線ってのがリンクだぜ、
というのが世界の共通認識でいいと思います。
GoogleもYahooも検索結果はそうなってますよね。ほらお馴染み。

その下線を無しにしたり、上線にしてみたり、マウスオーバーの時だけ下線出してみたり、
一生出さなかったり、とかなんとかやるのが、

text-decoration:

これです。
日本語にしたらテキストデコレーションなんで、そのまんまですな。テキストをデコる訳です。

これは「:」の後に何入れるかで装飾が決まります。
もう決まっちゃってるので、選べば良いのです。スーパー簡単。

none・・・ノンノンなーんも無しよのnone。下線はつきません。
underline・・・アンダーラインなので、ご存知下線が付きます。

以上!
ほんとは上線とか打ち消しとか点滅とかなんか色々ありそうな気もしますが、
そんなん使わないので、無視したらOK!
覚えるのはいつだって上位2個までなのです。だって生きてると他にも覚える事がいっぱいあるでしょう。

いかがでしょうか?

文字の読みやすさって言うのはホームページの一番重要な部分なので、
あれこれ試して、じっくり好みの感じを見つけてみてください!

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト