Cocoonでリンクの下線を消す方法(忘備録)

ブログの中にリンクを貼ったのですが、デフォルトだと赤い文字に下線が引いてあります。
今は赤色より青色、下線はないほうがスマート、ってどこかに書いてあったような…。

むぎこ
むぎこ

リンクの下線、どうやって消すんだろう。

そこで、初心者の私もリンクの下線を消すことに挑戦してみました。

いろいろと調べたものの、最初は「CSS」「カスタマイズ」「text-decoration」などなど、基本的な知識がない私には全てがよくわからなかったのですが、調べに調べてなんとか下線を消すことができました。

その手順を記録しておこうと思います。

リンクの下線の消し方、意外に簡単。初心者の私でもできた!

テーマはCocoonを使っていますので、Cocoonでのやり方になります。
Cocoonは本当に初心者にとって使いやすいおすすめのテーマです。

リンクの下線を消す方法

① ダッシュボードの左側のはけマーク[外観]の中の1番下、テーマエディターをクリック。

② 右端のスタイルシートをクリック。
③ 左側の **子テーマ用のスタイルを書く・・/ *必要ならばここにコードを書く*/
そのすぐ下の空欄のところに下の吹き出しの中のコードを貼り付けます。(コピー)

むぎこ
むぎこ

/* リンクの下線を消す */
a {
  text-decoration: none;
}

④ 一番下の「ファイルを更新」をクリック。

これでサイト内のリンクのテキストがすべて下線なしに変わっています。

リンクの下線をマウスを乗せた時だけつけたい

リンクを貼ったテキストの上にマウスでカーソルを乗せることを

マウスオーバー」というらしいです。

リンクのテキストから下線を消すことができたので、今度はマウスオーバー時に下線が現れるようにしてみました。

上の下線を消す方法の①、②、③までは同じです。

そして下線を消すコードを貼り付けたその下に、追加でこのコードを貼り付けます。

むぎこ
むぎこ

/* マウスオーバー時にリンクの下線を付ける */
a:hover {
  text-decoration: underline;
}

最後に「ファイルを更新」をクリック。
これでリンクのテキストが最初は下線なし、マウスオーバーすると下線が出る状態になりました。

最後にちょっとコードのお勉強

コードのことはあまりよくわからないので、少しずつお勉強。
初心者の私にとって、コードを貼り付けるというのはとても勇気のいることなのです。

『{ 』このマークがないだけでちゃんと表示されませんよ、とか『/>』がないとダメなので絶対消さないでね、とか書いてあるものを見ると、私なんかがこのコードを貼り付けてちゃんとなるのかな、とドキドキしながらやっています。

だから今回、実際にリンクの下線を消すコードを貼り付けて、ちゃんとできてるのを見るととても嬉しいのです。

で、少しずつ理解できるよう自分でまとめを書いておきました。

HTML(Hyper Text Markup Language)というのがWebサイトを作る基礎の言語なんですね。

HTMLは文字だけになるので、それを装飾するのがCSSだというのがわかりました。

今回リンクの下線を消すコードを調べてるうちに、リンクを貼るのは<a>タグというのもわかりました。だから a でスタートしているんですね。

以上、忘備録でした。

コメント