賢威7のテキストリンクのアンダーラインを消す方法

どうも。葉です。

この記事では、賢威7のテキストリンク(内部リンク、外部リンク、アンカーリンク等)にひかれているアンダーラインを削除する方法を解説していきます。

1.この記事を読むことでできるようになること

まずは、この記事を読むことでできるようになることを紹介します。

具体的には次のように、テキストリンクにアンダーラインをつけたり、消したりをできるようになります。

変更前

賢威7のテキストリンクにアンダーラインがある状態

変更後

賢威7のテキストリンクにアンダーラインがない状態

2.賢威7のリンクなどのアンダーラインを消す手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7のリンクなどのアンダーラインを消す手順

「base.css」をクリックしてください。

賢威7のリンクなどのアンダーラインを消す手順2

「base.css」を開いたら、「賢威テンプレートの共通設定」と書かれている場所を探してください。

そのすぐ下にある、次のコードを探してください。

a{
     ○○○○
     ○○○○
}
a:hover,
a:active,
a:focus{
     ○○○○
}

見つけたら、それぞれのコードの{}の中に次のコードを入力してください。

    text-decoration: none;

入力したら、「ファイルを更新」をクリックしてください。

賢威7のリンクなどのアンダーラインを消す手順3

これで、賢威7のリンクのアンダーラインが消えているはずです。

マウスオーバー時にアンダーラインを表示させたい場合

最後に補足説明を追加しておきますね。

上記で解説した<a>タグは、アンカータグとも呼ばれていて、<a>タグのついた文字列は、クリックすることで異なるページに飛ぶ「テキストリンク」に変わります。

そして、「a:hover,a:active,a:focus」はそれぞれ

  • a:hover:テキストリンクにマウスを重ねた時の表示
  • a:active:テキストリンクにマウスを重ねて、クリックしてから話すまでの表示
  • a:focus:キーボードの「Tab」などでリンクにフォーカスしているときの表示

を意味しています。

なので、マウスオーバー時などに、テキストリンクにアンダーラインを表示させたい場合は、まず、次のコードを探してください。

a:hover,
a:active,
a:focus{
     ○○○○
}

見つけたら、コードの{}の中に次のコードを入力してください。

    text-decoration: underline;

マウスオーバー時にアンダーラインを表示させる手順

これで、マウスオーバー時やテキストリンクにフォーカスしている時は、テキストリンクにアンダーラインが表示されるはずです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします