リンクの下線が出たままでカッコ悪い～【WordPress】

リンクの下線が出たままでカッコ悪い～

WRITTEN BY 天満川鈴

ブログカード主流の現在ですけど、リンクの下線を消したい場面はある

現在はブログカードやボタンリンクが主流になり、単純なテキストリンクをそのまま使う場面は減りました。
ただ、それでもサイドバー・固定ページ・独自UIなどでは「リンク下線が浮いて見える」と感じる場面があります。
本稿では、最低限UXを保ちながらリンク下線を調整するCSSを記します。

リンクの下線を消すコード

ここではサイト全体の下線を消す方法のみ記します。

下記のコードをヘッダーにコピペしてください。

a{
text-decoration:none;
}
a:hover{
text-decoration: underline;
}

結論

マウスを乗せた時（ホバーした時）は下線が現れた方がわかりやすいと思うので、そうしてます。
もしそれも不要なら、４～6行目は削ってください。

カッコよくなりました？

WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る