WordPressサイトのリンク文字色・text-decorationの変更方法

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

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

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

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

リンク文字色の変更

ダッシュボード＞外観＞テーマエディター（テーマの編集）＞スタイルシート

/* リンク */

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

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

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

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

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

text-decorationの変更

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

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

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

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

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

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

いかがでしょうか？

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