リンクを設定する
今回は主にHTMLとCSSの両方を記述しました。リンクに関する内容です。
a hrefでリンクの設定
以下、今回の記述内容です。
/*リンク*/
a {
color: #b77d3c;
}
a:hover {
color: #ff8800;
}
HTML
<p>森の工房の隣にある畑は毎年夏になると満開の<a href="https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%9E%E3%83%AF%E3%83%AA">ひまわり</a>の花で黄色く染まります。
この記述をすることによって、ひまわりという言葉をリンクに設定することができました。
このときのルールは、まず<a href="">で囲うことです。そして""の間にリンク先のURLを入力し、最後に</a>で閉じればOKです。
このときに、同一タブで表示させたいのであれば、上記の記述で問題ありませんが、別タブで開かせたい場合は、
<a href="URL" target="_blank"></a>と記述すればOKです。URLのあとにtarget="_blank"を記述すると覚えればいいと思います。
このときの注意点は、target="_blank"アンダーバーが入っていることです。これを忘れてしまうと正しく表示できなくなります。
rel=”nofollow"
rel=”nofollow”はリンク先にリンクジュースと呼ばれるSEOに大切な要素を渡さない意味や、リンク先をクロールさせない意味があります。簡単に言うと、リンク先のサイトに自分のサイトのパワーを渡さないって感じです。
被リンクすることによって、サイトはどんどん強くなっていきますので、リンク先すべてに rel=”nofollow”を入れていいと思います。
ただし、2018年6月現在、rel=”nofollow”を入れる本数もクローラーは評価の対象にしているという話もあるので、リンク先やリンク本数は厳選したほうが良いと思います。
rel=”nofollow”の記述方法は以下のようになります。
1はリンク先を別タブで”nofollowを入れる場合です。
2はリンク先を同一ページで”nofollow"を入れる記述です。
このときのルールは、
a hrefというセレクタにリンク先URLという値を””で囲って入力します。上記のように続けてセレクタを入力する場合は、半角スペースを空けて新たなtargetというセレクタを入力し、そのあとは再び"_blank"という値をで""で囲って入力すればOKです。
このルールはどれだけセレクタの数が増えても同じなので、しっかり覚えておきましょう。
linkタグ
linkタグには以下の6種類があります。
- a すべてのリンクの装飾
- a:link リンク先が未アクセス時の装飾
- a:visited リンク先がアクセス済時の装飾
- a:hover マウスホバー時の装飾
- a:focus フォーカス時の装飾
- a:active クリックしたときの装飾
ひとつのリンクに対して、上記すべての指定をすることができます。それぞれ異なる色で指定すれば、リンク先が未アクセス時の場合は赤、リンク先がアクセス済の場合は青、などなど。
基本的にはaとa:hover、a:visitedくらいしか使わないと思います。また、aタグを機能させるためには、上記の順番通りに記述する必要があります。
a:linkとa:focusを使用する場合、
a:focus {
青
}
a:link {
赤
}
上記のように入力しても機能しません。
正しくは、
a:link {
赤
}
a:focus {
青
}
と序列とおりに入力する必要があります。
まとめ
今回はやったことは大したことではないのに、no followなどlinkタグの説明が入ったので、けっこう長くなってしまいました。特にlinkタグは覚える必要があることなので、今後この記事を読み返す機会があるなぁって感じています。
以下、今回の成果です。
非常に見えにくいと思いますが、サイト上部のひまわりという言葉の色が変わっているのがわかると思います。やったことはここの色を変えただけはなく、リンク先を指定して、色を変えたことなので、混同しないように気をつけたいと思います。
