3/20 被リンクサービスリスト更新 新たに1サイトを追加

【SWELL】リンクにマウスホバー時の動作を追加するCSS

【SWELL】マウスホバー時のリンクに挙動を追加するCSS

テキストリンクは「リンクである」ということを認識させるのが大切です。

その中でも手軽なのは、マウスホバー時(カーソルを合わせた際)の動作を追加すること。実際、マウスホバー時のリンクを赤くしたり、下線を表示したりするサイトは多く存在します。

しかし、SWELLはリンクにホバーした際の動作が設定されていません。そこで、当ブログで使用しているマウスホバー時に動作を追加するCSSを紹介します。

目次

事前に

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

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

マウスホバー時のリンクに下線を引くCSS

早速ですが、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;
}

使用例

このCSSの内容は、リンクのマウスホバー時に下線を引くというシンプルなものです。

ギブショット ←カーソルをあててみてください

もちろん、このCSSが効果を発揮するのはマウスカーソルがある場合だけです。スマホやタブレットでは機能しないので注意してください。

CSSの内容

簡単にCSSの内容を解説します。必要に応じて改変してください。

適用されるリンク

今回のマウスホバーの動作は、以下の要素に含まれるリンクへ適用しています。

要素名内容
div.post_content p段落内
div.post_content liリスト内
div.post_content table > tbody > tr > *テーブルのセル内(th,td)
div.post_content p > * 段落内の注釈など
div.post_content li > *リスト内の注釈など
div.post_content figure > figcaptionテーブルの注釈内
div.post_content blockquote > cite引用ボックスの引用元

SWELL側で半透明になる動作が設定されている目次・投稿リスト・SWELLボタンはデフォルトで対象から除外しています。他にも「ここはリンクホバー不要だな」と思う箇所があれば、必要に応じて:notを追加してください。

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

マウスホバー時の変化

動作内容としては、マウスホバー時に下線を引くというものです。

動作内容
text-decoration: underline;下線を引く

マウスホバー時の動作を変更したい場合は、このtext-decorationを削除して書き換えてください。

また、同じ要領で「aタグ」や「a:hover:after」も装飾すれば、以下のようなアニメーションを実装することも可能です。

NxWorldさんの以下の記事が参考になります。
ホバー時のアンダーラインアニメーションの実装 ←カーソルをあわせてみてください

ただし、派手にしすぎるとユーザビリティを損ないます。アニメーションを付ける場合はほどほどにしておきましょう。

ちなみに、下線を引くという動作にしたのは、「下線なし+ホバーで下線を表示」というのが今最も利用されているベーシックな表現だからです。詳しくは、テキストリンクに下線はつけるべき?をご覧ください。

まとめ

ということで、リンクのマウスホバー時の動作(エフェクト)を追加するCSSを紹介しました。

正直もっとキレイにCSSを書けるはずなのですが、素人にはこれが限界でした。

こうすればいいよ、この要素(ブロック)内のリンクも対象にしたい、といった助言や要望があればTwitterにてご連絡いただけると幸いです。

SWELLの関連記事

目次
目次
閉じる