SWELL

SWELL｜テキストリンクにホバー時の装飾を追加する

SWELL｜テキストリンクにホバー時の装飾を追加する

SWELLのテキストリンクにマウスホバー時の動きを付けるCSSを紹介。

リンクに付けるアニメーションなどは様々ですが、ここでは派手過ぎないものに絞っています。

事前に

テキストリンクから下線を外す

まずはカスタマイズ > 投稿・固定ページ > コンテンツのデザイン の「テキストリンクにアンダーラインを付ける」にチェックが入っていると、常時下線が表示されます。

ここのチェックは事前に外しておいてください。

対象外のリンク

以下の要素はデザイン面を考え、下線が付かないように対象から除外しています。

クラス名内容
.p-toc__link目次
.p-postList__link投稿リスト
.swell-block-button__linkSWELLボタンブロック
.p-blogCard__titleブログカードブロック

また、ボタンリンクやブログカード、ヘッダー・フッター内の要素も対象ではありません。本文中のテキストリンクのみが対象になります。

テキストリンクにホバー時の動きを追加するCSS

スタイルシート（外観 > テーマ編集 > 子テーマのsytle.css）にコピペで貼り付けて使用してください。

下線（直線）

サンプル ←ホバーしてみてください

/*** 目次・投稿リスト・ボタン・ブログカード以外のリンクはホバー時に下線 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title){
	text-decoration: underline;
}

「下線なし＋ホバーで下線表示」は最もベーシックなデザインです。個性的とはいえないものの、これが派手過ぎずちょうどいいラインだと思います。

こちらもチェック

詳しくはテキストリンクに下線はつけるべき？をご覧ください。

下線（点線）

サンプル

/*** 目次・投稿リスト・ボタン・ブログカード以外のリンクはホバー時に点線 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title){
  text-decoration: underline;
  text-decoration-style: dotted;
}

下線（破線）

サンプル

/*** 目次・投稿リスト・ボタン・ブログカード以外のリンクはホバー時に破線 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title){
  text-decoration: underline;
  text-decoration-style: dashed;
}

赤色になる

サンプル

/*** 目次・投稿リスト・ボタン・ブログカード以外のリンクはホバー時に赤色 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title){
  color: #cf2e2e;
}

青から赤へと変化するリンクもよくありますが、赤以外はほとんど見かけませんね。

赤色になる＋下線

サンプル

/*** 目次・投稿リスト・ボタン・ブログカード以外のリンクはホバー時に赤色＋下線 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title){
  text-decoration: underline;
  color: #cf2e2e;
}

赤色＋下線表示もよく見かけるデザインです。

Yahooニュースやgooニュースなど、ニュース系のサイトに多い傾向です。
参考：ニュースサイトのリンクデザイン（テキストリンクに下線はつけるべき？）

あとがき

この記事ではよくあるリンクのホバーデザインを紹介しました。

もう少し奇抜なホバーデザインが良いという方は、当サイトの「リンク」のCSSを参考にしてください。SWELLであれば、当記事と同じ要領でリンクのデザインを変更できますよ。