SWELLのテキストリンクにマウスホバー時の動きを付けるCSSを紹介。
リンクに付けるアニメーションなどは様々ですが、ここでは派手過ぎないものに絞っています。
事前に
テキストリンクから下線を外す
まずはカスタマイズ > 投稿・固定ページ > コンテンツのデザイン の「テキストリンクにアンダーラインを付ける」にチェックが入っていると、常時下線が表示されます。
ここのチェックは事前に外しておいてください。

対象外のリンク
以下の要素はデザイン面を考え、下線が付かないように対象から除外しています。
クラス名 | 内容 |
---|---|
.p-toc__link | 目次 |
.p-postList__link | 投稿リスト |
.swell-block-button__link | SWELLボタンブロック |
.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であれば、当記事と同じ要領でリンクのデザインを変更できますよ。