[`yahoo` not found]
Pocket

リンクの文字を青くする方法


今回はリンクの文字を青くする方法を説明します。

ネットでは様々な場所にリンクがあります。

リンクの文字に着色することで、見た人は、
ここから「リンク出来る」と認識します。

また、リンクの文字に色が付いている方が、視覚的に見ても
大変見やすく、圧倒的にサイトの見栄えが良くなります。

リンクの文字は一般的に青が多く、押すと紫色に変わります。

また、押していない文字の上にマウスポインターをのせると、
赤っぽい色になります。

リンクの文字はワードプレスのカラーコード一覧を使えば、
好きな色に変えられますが、ここでは、ごく一般的な
文字を青く、押したら紫色になるようにする方法を説明していきます。

まず、「外観」⇒「テーマの編集」⇒「スタイルシート」
と行きます。

何をテーマにしているかによって画面の表示は大きく変わりますが、
下記のような画面が出てくると思います。

bandicam 2016-08-09 10-04-55-649

画面が出ましたら、画面一番下まで移動し、下記の画像のような
タグを書き加えてください。

bandicam 2016-08-09 09-48-07-326

※初心者の方は、スタイルシートの書き換えで入力ミスをしないように、
念のためにメモ帳などにタグの内容すべてをコピペしてバックアップを
取って下さい。

スタイルシートは1文字でも入力ミスをすると、
管理画面に行けなくなります。


入力する際、
a:link{ color:#0000ff;}より下にある記載されている、

a:visited{ color:#60c;}
a:hover{ color:#ff0000;}
a:active{ color:#c03;} この3項目は、上記の画像のように、
それぞれ、半角一文字分のスペースを空けて入力して下さい。

これをしないと、設定が反映されず、リンクの文字の色が変わりません。

入力が終了したら、画面一番下にある、青い「ファイル更新」
ボタンを押して下さい。

bandicam 2016-08-09 10-32-55-557

すると、画像のようにリンクの文字が青くなります。

bandicam 2016-08-09 11-38-56-387

マウスポインターを置くとリンクが光るようにする方法


リンクの文字の色を青くする方法はこれで分かったと思いますが、
次は、リンク画像の上にマウスポインターを置くと、光るように
する方法を説明します。

画像やバナーは光らなくてもリンクは出来ますが、光ったほうが
どこか行けるというのが分かりやすいです。

光った方が、圧倒的に見た人の反応は良いです。
ぜひ、リンク画像やバナーを光らせる方法も身に付けて下さい。

ここでも、
「外観」⇒「テーマの編集」⇒「スタイルシート」
と行きます。

画面が出ましたら、一番下に、

/* オンマウスでリンク画像が光る */
a: img{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

a:hover img{
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

と書き加えて、「ファイル更新」
ボタンを押して下さい。

下記の画像のようになります。
上のバナー画像はマウスポインターを画像上に置いた時に光った状態です。
下のバナー画像は通常の状態です。

光ると画像はやや白っぽくなります。
この違い、お分かりいただけるでしょうか?

bandicam 2016-08-09 11-02-11-560
このように少しでも見た目の良いサイトを作っていけるといいですね。





[`yahoo` not found]
Pocket