SWELLでリンクに下線を引いたり消したりする完全ガイド

SWELLでリンクの下線が出たり出なかったりして、「どこを触ればいいのかわからない…」と困っていませんか。

ここではリンクに下線を引いたり、消したりする方法をお伝えします。

読み終わるころには、自分のサイトに合ったSWELLのリンク下線ルールを決めて、迷わず設定できるようになります。

SWELLでリンクの下線に悩む理由と、先に知っておきたいこと

SWELLはデフォルトで「リンク下線なし」だから迷いやすい

SWELLでは、インストールした直後の状態だと、記事内のテキストリンクに下線が付きません。デザイン的にはスッキリしていておしゃれですが、読者からすると「どこがリンクなのか、一瞬わかりにくい」ということもあります。

ポイントは次のとおりです。

• 初期設定ではテキストリンクに下線が付かない
• リンクカラーだけでクリックできる場所を伝える前提になっている
• 特にスマホや、小さい文字を読むのがつらい人には少し不親切になりがち

その結果、「やっぱりリンクには下線を入れたいな」と思って調べ始めたところで、設定場所がいくつもあって迷子になる…という流れになりやすいんですよね。

「どこに効く下線か」が混ざりやすい

もう一つややこしいのが、「リンクの線」に関係する場所がいくつかに分かれていることです。

• 記事本文のテキストリンクの下線
• ヘッダーやフッターメニューに出る線やホバー時の演出
• スマホのカスタムボタンなど、ボタン系のリンクの線

このあたりの設定やCSSを一気に触ってしまうと、「ここを変えたのに、あっちのリンク下線は変わらない」「別の場所まで変わってしまった」といった状態になりやすいです。

解決の基本方針は「標準機能＋ピンポイントCSS」

リンク下線まわりで大事なのは、「全部をCSSでなんとかしよう」としないことです。私自身、最初にやりがちだったのがこれでした。

おすすめの考え方はとてもシンプルです。

• まずはカスタマイザーで設定できる範囲をきちんと使う
• それでも足りない「一部だけ変えたい部分」はCSSでピンポイントに上書きする
• 記事本文とメニュー、ボタンなどで役割を分けて考える

この方針さえ決めておけば、あとからデザインを変えたくなったときや、SWELLの仕様が変わったときにも対応しやすくなります。

SWELL リンク下線の基本設定（カスタマイザー編）

カスタマイザーでリンクの下線をオン・オフする手順

投稿や固定ページの本文に出てくるテキストリンクは、カスタマイザーから簡単に下線を付けたり消したりできます。流れは次のようなイメージです。

• 管理画面の「外観」→「カスタマイズ」を開く
• 「投稿・固定ページ」をクリック
• 「コンテンツのデザイン」を開く
• 「テキストリンクにアンダーラインを付ける」にチェックを入れる

この設定がオンになっていると、基本的には全ページの本文にあるテキストリンクに下線が付きます。どんな範囲に影響するのか、ざっくり表にしておきます。

項目	メニューの場所	できること
テキストリンクにアンダーラインを付ける	外観 → カスタマイズ → 投稿・固定ページ → コンテンツのデザイン	投稿・固定ページ本文などのテキストリンクに、下線を一括でオン／オフできる

「とりあえず記事内のリンクだけでもはっきり見せたい」という場合は、まずここにチェックが入っているかどうかを確認してみてください。

SWELLのリンクカラーと下線の関係

下線は「線が出るかどうか」の設定ですが、線の色はリンクカラーの設定に連動します。リンクカラーは、主に次の場所で変更します。

• 外観 → カスタマイズ → サイト全体設定 → 基本カラー → リンクカラー

ここで設定した色が、テキストリンクの文字色と下線の色のベースになります。リンクカラーを変えるときのポイントは次のとおりです。

リンクカラーと下線はセットで考えて、「ここは押せる場所ですよ」というサインをはっきり出してあげましょう。

SWELL設定（エディター設定）側の下線関連項目

SWELLには、カスタマイザーとは別に「太字のデザイン」などを変えられる設定もあります。ここでは、太字の下に点線を付けるかどうかなど、文章装飾の細かい見た目を決めることができます。

• 太字の下に点線を付けるかどうか
• 見出しやマーカーなど、記事内コンテンツのデザイン

この記事のテーマはリンクの下線ですが、太字に点線を付ける設定をオンにすると、見た目がリンクと少し似てしまうことがあります。

個人的には、次のように役割を分けておくと読みやすいと感じています。

• リンク：色の変更＋アンダーラインで「押せる場所」を示す
• 強調テキスト：太字やマーカー、背景色などで「ここを読んでほしい」を示す

この役割分担を決めておくと、あとから装飾を増やしてもゴチャゴチャしにくくなります。

SWELL リンク下線をCSSで細かくカスタマイズする

下線を基本オフにして、特定の場所だけリンクの下線を付ける考え方

私がよくやる方法の一つが、「全体では下線なしにしておいて、必要な場所だけCSSで下線を付ける」というやり方です。イメージとしては次のような方針です。

こうしておくと、「この記事のここだけ下線を消したい」といった細かい調整がしやすくなります。CSSのイメージはこんな感じです。

a { text-decoration: none; }
.article a { text-decoration: underline; }

実際には、使用しているレイアウトや環境によってクラス名が違うので、ブラウザの検証ツールで自分のサイトの本文部分のクラス名を確認してから使うようにしてください。

ここまでを簡単に表で整理すると、次のようなイメージになります。

パターン	メリット	デメリット
カスタマイザーで全リンク下線ON	設定が簡単で、忘れにくい	ボタンやメニューなど、不要な場所にも下線が付きやすい
CSSで場所ごとに下線を制御	デザインを細かく作り込める	最低限のCSSの知識が必要
下線なし＋ホバー時だけ下線	普段はスッキリ、ホバー時にリンクだと分かる	スマホにはホバーがないので工夫が必要

CSSが苦手でも、まずはコピペで試してみて、「こういう書き方で見た目が変わるんだな」と感覚をつかんでいくと、少しずつ慣れていきます。

ホバー時だけリンクの下線を出すCSSの考え方

リンクが多い記事だと、常にアンダーラインが付いていると、画面全体が線だらけに見えてしまうことがあります。そんなときは、「通常は下線なし、マウスを乗せたときだけ下線を表示する」というパターンも便利です。

考え方はとてもシンプルで、次の2パターンを切り替えるだけです。

• 通常状態：text-decoration: none;
• ホバー時：text-decoration: underline;

CSSのイメージはこんな感じです。

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

ただし、PCではホバーが使えますが、スマホには「マウスを乗せる」という概念がありません。そのため、ホバーだけに頼るのではなく、次のような工夫も一緒にやっておくと安心です。

• リンクカラーを本文としっかり分ける
• 太字やアイコンを組み合わせて、リンクらしさを出す
• 重要な導線はボタンやカード型リンクにする

ブログのように文字中心のサイトでは、常時アンダーラインを付けた方が親切なケースも多いので、自分のサイトの読者層をイメージしながら決めてみてください。

SWELLのリンク下線用CSSを整理するミニまとめ表

ここまで出てきたCSSパターンを、用途別にまとめると次のようになります。

目的	ざっくりCSSイメージ	向いているサイト例
記事内リンクだけ常に下線ON	.entry-content a { text-decoration: underline; }	ブログ・アフィリエイトサイト
全体は下線なし＋ホバー時だけON	a { text-decoration: none; }／a:hover { text-decoration: underline; }	コーポレートサイト、シンプル系サイト
特定のボタンだけ下線OFF	.btn a { text-decoration: none; }	CTAボタンを目立たせたいページ

実際に使うときは、検証ツールで自分のサイトのクラス名を確認してから書き換えてください。ざっくりとした考え方さえ分かっていれば、クラス名が違っていても応用できます。

場所別に見るSWELL リンク下線（メニューやボタンなど）

ヘッダー・フッターメニューのリンク下線

ヘッダーやフッターメニューには、SWELL独自のホバーエフェクトや縦線などの装飾が入っています。ここに本文と同じようなアンダーラインを付けると、少しうるさく見えてしまうこともあります。

よくある調整例としては、次のようなものがあります。

ざっくり整理すると、次のようなイメージでCSSを書くことが多いです。

場所	代表的なクラス例	よくある調整内容
ヘッダーメニュー	.c-gnav など	ホバー時の色やアンダーライン、アニメーションの調整
フッターメニュー	.l-footer__nav など	メニューの区切り線や下線を消す・弱くする

クラス名は使用しているスキンや設定によって変わることもあるので、必ず検証ツールで実際のHTMLを確認しながら、ピンポイントで指定してください。

スマホのカスタムボタンに出てしまう下線

カスタマイザーで「テキストリンクにアンダーラインを付ける」をオンにしていると、環境によってはスマホのカスタムボタンのテキストにまで下線が出てしまうことがあります。

最近のSWELL本体では多くのケースが調整されていますが、カスタマイズの影響などで「なぜかスマホのカスタムボタンにだけ線が残っている」という相談も見かけます。その場合は、対象のクラスだけ下線を消してあげるとスッキリします。

CSSの一例は次のとおりです。

.l-header__customBtn.sp_ a {
  text-decoration: none;
}

こうしておけば、本文のリンクには下線を残しつつ、スマホのカスタムボタンだけ線を消すことができます。

カードリンクやボタン系のリンク

SWELLには、カード型リンクやボタンブロックなど、見た目がボタンになっているリンクもたくさん用意されています。これらは、パッと見で「ここは押せる場所だ」と分かるデザインになっているので、テキストリンクのような下線は基本的に不要です。

• テキストリンク：下線と色で「リンクであること」をはっきり示す
• ボタン・カード：背景色や枠線、影などで「押せるボタン感」を出す

このように役割を分けると、SWELLのリンク下線をどうするか考えるときに迷いにくくなります。重要な行動を促したい場所はボタンやカードにして、本文中の補足や関連記事にはテキストリンク＋下線、といった使い分けもおすすめです。

SWELL リンク下線デザインのおすすめパターン

サイトのタイプ別おすすめ設定

まずは、サイトのタイプごとに、リンク下線のざっくりしたおすすめ設定を表にしてみます。

サイトタイプ	記事内リンク	メニュー／ボタン	コメント
ブログ・アフィリエイト	常時下線ありが無難	下線なし、ホバーで色や背景を変える	収益導線はしっかり目立たせたい
企業サイト・LP	本文はホバーだけ下線でも可	メニューはホバー時の下線やアニメーションで演出	デザイン性と読みやすさのバランスが大事
ノウハウ系・マニュアル系	常時下線＋分かりやすいリンクカラー	下線なしでOK	情報の探しやすさを最優先にする

自分のサイトがどのタイプに近いかを考えてから、リンクの下線ルールを決めると、判断がかなり楽になります。

クリック率を上げるためのリンク下線のコツ

実際に運営していて感じるのは、「クリックされやすいリンクには、見た目以外にも共通点がある」ということです。下線の有無だけでなく、次のようなポイントも意識してみてください。

• 周囲のテキストと比べて、リンクの見た目が明らかに違う
• 1つの文章の中にリンクを詰め込みすぎない
• リンク先の内容がイメージしやすいアンカーテキストにする

SWELLのリンク下線を調整するときは、こんな工夫も合わせてやっておくと効果的です。

• 本当にクリックしてほしいリンクだけ、下線＋ボタンやカードにする
• 導線前後の文章で、「押すと何が分かるのか」を一言入れておく
• テキストリンクとボタンリンクで役割を分けておく

見た目の調整と、言葉の調整をセットでやると、リンクのクリック率はじわじわ変わっていきます。

NGになりがちなリンク下線パターン

逆に、「これはやりすぎかな…」というリンク下線のパターンもあります。思い当たるものがあれば、少しずつ直していきましょう。

• 下線の色が薄すぎて、ほとんど見えない
• ほとんどすべての強調表現に下線を使っている
• 見出しや太字、ボタンにまで下線を多用している

こういった状態になると、「どこがリンクで、どこがただの強調なのか」が一瞬で判断できません。

まとめると、次のように役割を整理しておくのがおすすめです。

• リンク下線：クリックするとページが変わる場所のサイン
• 太字やマーカー：特に読んでほしいキーワードのサイン

この役割分担を意識するだけでも、サイトの読みやすさはかなり変わります。

SWELL リンク下線に関するよくある質問

Q1. SWELLでリンクの下線を付けたら、スマホのボタンにも線が出てしまいました

A.
カスタマイザーの「テキストリンクにアンダーラインを付ける」をオンにしていると、環境やカスタマイズの影響で、スマホのカスタムボタンのテキストにまでアンダーラインが出ることがあります。

その場合は、そのボタン部分のクラスを指定して、CSSで下線だけオフにするとスッキリします。

例としては、次のような形です。

.l-header__customBtn.sp_ a {
  text-decoration: none;
}

このようにしておけば、記事本文のリンク下線はそのままに、スマホのボタンだけ線を消すことができます。

Q2. SWELLの投稿内だけリンク下線を付けて、固定ページは下線なしにできますか？

A.
可能です。投稿ページと固定ページでは、HTMLのクラスが違うので、それぞれを分けてCSSを書いてあげるときれいに制御できます。

イメージとしては、次のような感じです。

.single .entry-content a { text-decoration: underline; }
.page .entry-content a { text-decoration: none; }

実際のクラス名はサイトによって異なることがあるので、検証ツールで投稿ページと固定ページそれぞれの本文クラスを確認してから書き換えてください。

Q3. SWELLでリンクカラーを変えたら、下線の色が変わらないところがあります

A.
リンクカラーを個別にカスタマイズしている場合や、複数の装飾を重ねている場合、場所によっては文字色だけ変わって、下線の色が元のまま残ってしまうことがあります。

そのようなときは、次のような点をチェックしてみてください。

• そのリンクに、追加CSSやブロック設定で個別の色指定が入っていないか
• text-decoration-color で下線の色を個別指定していないか
• ブロックエディタで装飾を重ねた順番の影響を受けていないか

一度リンクを作り直してみたり、シンプルな装飾だけに戻して検証してみると、原因が見つかりやすくなります。

まとめ：SWELL リンク下線を今日から改善する一歩

この記事の内容を改めて整理します

今日からできる最初の一歩は、とてもシンプルです。

• 自分のサイトの記事を1つ開いて、PCとスマホの両方で「どこがリンクかわかりやすいか」を確認する
• 必要に応じて、カスタマイザーの「テキストリンクにアンダーライン」と「リンクカラー」を見直す

それだけでも、読者から見た分かりやすさは確実に上がります。そのうえで、この記事で紹介したCSSカスタマイズを少しずつ試していけば、SWELLのリンク下線を自分のサイトにぴったり合った形に育てていけるはずです。

リンクの下線を味方につけて、「読まれる・クリックされやすいサイト」に一歩ずつ近づいていきましょう。