WordPressの文字リンクをボタン化するCSS｜押せる表示に変更

WordPressの固定トップページに、次のリンクを設置しました。

• 心臓手術体験記の目次へ
• ChatGPTでブログ作成の目次へ
• 新着記事を一覧で見る

リンク先は正常に開けるようになりました。しかし、公開画面を確認すると、「新着記事を一覧で見る」は通常の文字と見た目があまり変わらず、マウスを載せるまでリンクが設定されていることが分かりにくい状態でした。

上の2つの目次リンクも、初めて訪れた方がすぐに入口だと判断できるよう、文字リンクではなく、背景色付きの大きなボタンとして表示することにしました。

固定トップページ全体の作成手順は、次の記事で紹介しています。

WordPressに固定トップページを作る全体手順を見る →

私の場合は、HTMLのaタグに専用のクラス名を付け、追加CSSで背景色、枠線、余白、太字を指定することで解決しました。ページ移動の機能はそのままに、マウスを載せる前から「押せる場所」だと分かる表示に変更できました。

最初に結論

別ページへ移動するリンクは、HTMLのaタグを使ったまま、CSSでボタンのような見た目に変更できます。

1. HTMLのリンクへ専用のクラス名を付ける
2. CSSで背景色、枠線、余白、文字の太さを指定する
3. :hoverでマウスを載せたときの表示を指定する
4. :focus-visibleでキーボード選択時の表示を指定する
5. スマートフォンでは横幅いっぱいにする

私のサイトでは、重要な2つの入口を背景色付きにし、新着記事一覧は少し控えめな枠線付きボタンにしました。

説明を省略して「そのまま貼り付ける完成CSS」へ移動する

この記事で分かること

• 文字リンクに専用のCSSクラスを付ける方法
• 赤、青、枠線付きの3種類のボタンを作る方法
• マウスを載せたときの表示を変える方法
• Tabキーで選択した場所を分かりやすくする方法
• スマートフォンで横幅いっぱいに表示する方法
• トップページだけへCSSを適用する方法
• 表示が崩れた場合に元へ戻す方法

この記事の確認環境

この記事は、2026年7月に次の環境で確認しました。

• WordPress：7.0.1
• テーマ：Lightning 15.37.1
• Lightning Pro：未使用
• ブラウザ：Microsoft Edge
• 確認端末：Windows PC、iPhone

※テーマやバージョンによって、追加CSSの場所や表示結果が異なる場合があります。

リンクをボタン化した理由｜変更前は押せると分かりにくかった

変更前のトップページでは、「心臓手術体験記の目次へ」や「新着記事を一覧で見る」などの入口が、通常の文字リンクとして表示されていました。

リンク自体は設定されていましたが、通常時には本文と見た目が近く、マウスカーソルを載せて文字色が変わるまで、押せる場所だと気付きにくい状態でした。

そこで、リンクが常にリンクだと分かるよう、次の要素を追加しました。

• 背景色または青い枠線
• 太字
• 十分な上下左右の余白
• 右向きの矢印
• マウスを載せたときの背景色
• キーボード選択時の枠線

目次へ戻る ↑

ページ移動にはaタグを使う

見た目をボタンのように変更しても、別ページへ移動する場合は、HTMLのaタグを使います。

<a href="リンク先URL">
  新着記事を一覧で見る
</a>

buttonタグは、フォームを送信する、画面を開閉するなど、ページ内の操作を実行するときに使います。今回の目的は別ページへ移動することなので、aタグをCSSでボタン風にしました。

目次へ戻る ↑

HTMLへクラスを付ける

私のトップページでは、次のHTMLを使用しています。

心臓手術体験記

<a
  class="kara-home__button kara-home__button--heart"
  href="https://kara3.com/%E5%BF%83%E8%87%93%E6%89%8B%E8%A1%93%E4%BD%93%E9%A8%93%E8%A8%98%EF%BD%9C%E7%9B%AE%E6%AC%A1/"
>
  <span>心臓手術体験記の目次へ</span>
  <span aria-hidden="true">→</span>
</a>

ChatGPTでブログ作成

<a
  class="kara-home__button kara-home__button--chatgpt"
  href="https://kara3.com/chatgpt%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E4%BD%9C%E6%88%90%EF%BD%9C%E7%9B%AE%E6%AC%A1/"
>
  <span>ChatGPTでブログ作成の目次へ</span>
  <span aria-hidden="true">→</span>
</a>

新着記事一覧

<p class="kara-home__all-link">
  <a href="https://kara3.com/blog/">
    <span>新着記事を一覧で見る</span>
    <span aria-hidden="true">→</span>
  </a>
</p>

aria-hidden="true"は、装飾として付けた矢印を読み上げ対象から外すために付けています。

自分のサイト用に書き換えるテンプレート

<a
  class="kara-home__button kara-home__button--heart"
  href="ここにリンク先URLを入力"
>
  <span>ここにボタンの文字を入力</span>
  <span aria-hidden="true">→</span>
</a>

WordPress用HTMLをChatGPTで作る手順は、ChatGPTでWordPress用HTMLを作る方法で紹介しています。

目次へ戻る ↑

赤と青の背景付きボタンを作るCSS

WordPress管理画面から、次の場所を開きます。

外観 → カスタマイズ → 追加CSS

すでにCSSが入力されている場合は削除せず、事前にメモ帳などへコピーして保存します。その後、一番下へ次のCSSを追加します。

/* トップページの主要ボタン共通設定 */
body.home .kara-home__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* 心臓手術体験記 */
body.home .kara-home__button--heart {
  background-color: #a83f50 !important;
  border-color: #a83f50 !important;
}

/* ChatGPT×WordPress */
body.home .kara-home__button--chatgpt {
  background-color: #285b9e !important;
  border-color: #285b9e !important;
}

body.homeを先頭に付けることで、このCSSが固定トップページだけに適用されるようにしています。

目次へ戻る ↑

マウスを載せたときの表示

マウスを載せたときは、背景色を少し濃くし、ボタンをわずかに上へ動かしました。

/* 心臓手術側にマウスを載せたとき */
body.home .kara-home__button--heart:hover {
  color: #ffffff !important;
  background-color: #84303e !important;
  border-color: #84303e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2) !important;
}

/* ChatGPT側にマウスを載せたとき */
body.home .kara-home__button--chatgpt:hover {
  color: #ffffff !important;
  background-color: #1f477c !important;
  border-color: #1f477c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2) !important;
}

/* 押している間 */
body.home .kara-home__button:active {
  transform: translateY(0) !important;
}

動きを大きくしすぎず、リンクであることが分かる程度にしています。

目次へ戻る ↑

枠線付きボタンを作るCSS

新着記事一覧は、上の2つの入口より重要度を少し下げるため、背景を白のままにし、青い枠線を付けました。

/* 新着記事一覧の配置 */
body.home .kara-home__all-link {
  margin: 24px 0 0 !important;
}

/* 新着記事一覧の枠線付きボタン */
body.home .kara-home__all-link a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 280px !important;
  max-width: 100% !important;
  padding: 14px 26px !important;
  color: #285b9e !important;
  background-color: #ffffff !important;
  border: 2px solid #285b9e !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 3px 10px rgba(40, 91, 158, 0.12) !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.home .kara-home__all-link a:hover {
  color: #ffffff !important;
  background-color: #285b9e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(40, 91, 158, 0.25) !important;
}

body.home .kara-home__all-link a:active {
  transform: translateY(0) !important;
}

通常時から青い文字と枠線が見えるため、マウスを載せなくてもリンクであることが分かるようになりました。

目次へ戻る ↑

キーボードで選択したときの表示

マウスを使わず、Tabキーでリンクを選ぶ人にも現在の位置が分かるよう、:focus-visibleを設定しました。

/* キーボードで選択したとき */
body.home .kara-home__button:focus-visible,
body.home .kara-home__all-link a:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #ffffff !important;
}

outline: noneだけを指定して枠線を消すと、キーボード利用者が現在選択している場所を確認できなくなるため、見える枠線を残します。

目次へ戻る ↑

矢印を少し動かす

マウスを載せたとき、右側の矢印だけを少し右へ動かしました。

body.home .kara-home__button span:last-child,
body.home .kara-home__all-link a span:last-child {
  display: inline-block !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
  transition: transform 0.2s ease !important;
}

body.home .kara-home__button:hover span:last-child,
body.home .kara-home__all-link a:hover span:last-child {
  transform: translateX(5px) !important;
}

目次へ戻る ↑

スマートフォンで横幅いっぱいにする

スマートフォンでは、ボタンを横幅いっぱいにして、指で押しやすくしました。

@media screen and (max-width: 767px) {
  body.home .kara-home__button,
  body.home .kara-home__all-link a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
  }
}

min-width: 0を指定することで、PC用の最小幅が残って画面からはみ出すことを防いでいます。

目次へ戻る ↑

そのまま貼り付ける完成CSS

以下は、この記事で説明したCSSを一つにまとめたものです。私のトップページ用HTMLに合わせたクラス名を使用しています。HTMLのクラス名が異なる場合は、そのまま貼り付けても反映されません。

/* ==================================================
   WordPressトップページのリンクをボタン化する完成CSS

   対象となるクラス
   ・kara-home__button
   ・kara-home__button--heart
   ・kara-home__button--chatgpt
   ・kara-home__all-link

   body.homeを付けることで、
   トップページだけに適用しています。
================================================== */

/* 1．赤・青の主要ボタンに共通する設定 */
body.home .kara-home__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* 2．心臓手術体験記の赤いボタン */
body.home .kara-home__button--heart {
  color: #ffffff !important;
  background-color: #a83f50 !important;
  border-color: #a83f50 !important;
}

body.home .kara-home__button--heart:hover {
  color: #ffffff !important;
  background-color: #84303e !important;
  border-color: #84303e !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20) !important;
}

/* 3．ChatGPT×WordPressの青いボタン */
body.home .kara-home__button--chatgpt {
  color: #ffffff !important;
  background-color: #285b9e !important;
  border-color: #285b9e !important;
}

body.home .kara-home__button--chatgpt:hover {
  color: #ffffff !important;
  background-color: #1f477c !important;
  border-color: #1f477c !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20) !important;
}

body.home .kara-home__button:active {
  transform: translateY(0) !important;
}

/* 4．「新着記事を一覧で見る」の配置 */
body.home .kara-home__all-link {
  margin: 24px 0 0 !important;
  text-align: center !important;
}

/* 5．新着記事一覧の枠線付きボタン */
body.home .kara-home__all-link a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 280px !important;
  max-width: 100% !important;
  padding: 14px 26px !important;
  color: #285b9e !important;
  background-color: #ffffff !important;
  border: 2px solid #285b9e !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 3px 10px rgba(40, 91, 158, 0.12) !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.home .kara-home__all-link a:hover {
  color: #ffffff !important;
  background-color: #285b9e !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(40, 91, 158, 0.25) !important;
}

body.home .kara-home__all-link a:active {
  transform: translateY(0) !important;
}

/* 6．キーボードで選択したときの表示 */
body.home .kara-home__button:focus-visible,
body.home .kara-home__all-link a:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px #ffffff,
    0 7px 18px rgba(0, 0, 0, 0.20) !important;
}

/* 7．右側の矢印 */
body.home .kara-home__button span:last-child,
body.home .kara-home__all-link a span:last-child {
  display: inline-block !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
}

body.home .kara-home__button:hover span:last-child,
body.home .kara-home__all-link a:hover span:last-child {
  transform: translateX(5px) !important;
}

/* 8．スマートフォン表示 */
@media screen and (max-width: 767px) {
  body.home .kara-home__button,
  body.home .kara-home__all-link a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  body.home .kara-home__all-link {
    width: 100% !important;
    margin-top: 20px !important;
  }
}

/* 9．動きを減らす設定を使用している場合 */
@media (prefers-reduced-motion: reduce) {
  body.home .kara-home__button,
  body.home .kara-home__all-link a,
  body.home .kara-home__button span:last-child,
  body.home .kara-home__all-link a span:last-child {
    transition: none !important;
  }

  body.home .kara-home__button:hover,
  body.home .kara-home__all-link a:hover,
  body.home .kara-home__button:hover span:last-child,
  body.home .kara-home__all-link a:hover span:last-child {
    transform: none !important;
  }
}

この完成CSSは、次のHTMLクラスを使用していることが前提です。

class="kara-home__button kara-home__button--heart"
class="kara-home__button kara-home__button--chatgpt"
<p class="kara-home__all-link">

HTML側のクラス名とCSS側のクラス名が一文字でも異なると反映されません。

目次へ戻る ↑

動きを減らす設定を使っている方への対応

パソコンやスマートフォンには、画面上の動きを減らす設定があります。今回の完成CSSでは、その設定を利用している場合、ボタンや矢印が動かないようにしています。

この指定がなくてもボタンは動作しますが、動きによる負担を感じる利用者にも使いやすくするため追加しました。

完成後に確認したこと

CSSが反映されない場合は、WindowsでCtrl＋F5を押し、古いCSSを使わずに再表示しました。

目次へ戻る ↑

表示が崩れた場合の戻し方

表示が崩れた場合は、今回追加したCSS部分だけを削除し、「公開」を押します。事前にコピーしておいた元のCSSへ戻せば、変更前の状態に戻せます。

CSSを削除しても表示が変わらない場合は、次を確認します。

• ブラウザのキャッシュ
• キャッシュ系プラグイン
• CSSの閉じ括弧}の不足
• HTMLのクラス名とCSSのクラス名
• 全角文字や不要な空白

目次へ戻る ↑

すべてのリンクをボタンにする必要はない

すべてのリンクを背景色付きのボタンにすると、どれが重要なのか分かりにくくなります。私のトップページでは、次のように役割を分けました。

最も重要な入口

• 心臓手術体験記
• ChatGPT×WordPress実践記

背景色付きの大きなボタンにしました。

補助的な入口

• 新着記事一覧

枠線付きの白いボタンにしました。

本文中の関連記事

通常の文字リンクのままにしています。目立たせるリンクを絞ることで、読者がどこを押せばよいか判断しやすくなります。

目次へ戻る ↑

よくある質問

CSSを追加してもボタンになりません

HTMLに付けたクラス名と、CSSで指定したクラス名が一致しているか確認します。

class="kara-home__button"

.kara-home__button

ハイフン、アンダーバー、全角・半角の違いにも注意します。

文字の色が青いままになります

テーマ側のリンク色が優先されている可能性があります。今回のCSSでは、テーマ側の設定より優先しやすいように!importantを付けています。

ボタンがスマートフォンからはみ出します

次の指定が入っているか確認します。

width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;

テーマを更新すると追加CSSは消えますか？

通常、WordPressの「追加CSS」へ保存した内容は、テーマ本体のファイルを直接編集した場合とは異なり、テーマ更新によって上書きされにくい仕組みです。

ただし、テーマ更新でHTMLのクラス名や構造が変わると、同じCSSが効かなくなる場合があります。更新後はPCとスマートフォンで確認する必要があります。

WordPressのボタンブロックを使ってもよいですか？

はい。単純なボタンを1つ作るだけなら、WordPressのボタンブロックでも対応できます。

今回のように、3種類のボタンを統一する、赤と青で役割を分ける、特定ページだけへ適用する、矢印やキーボード表示を細かく設定する場合は、HTMLのクラスと追加CSSを使う方法が調整しやすくなります。

トップページ以外の固定ページでも使えますか？

使えます。ただし、この記事のCSSは、先頭にbody.homeを付けてトップページだけに適用しています。

ほかの固定ページで使う場合は、対象ページの専用クラスへ変更する方法があります。body.homeだけを単純に削除すると、同じクラス名を使ったほかの場所にもCSSが適用される可能性があるため注意してください。

最初はトップページだけで確認し、別のページへ広げる場合は、変更前のCSSを保存したうえで少しずつ確認する方法が安全です。

目次へ戻る ↑

まとめ

今回、WordPressの文字リンクを次の3種類へ変更しました。

• 赤い背景のボタン
• 青い背景のボタン
• 白地に青い枠線のボタン

変更した目的は、デザインを派手にすることではなく、マウスを載せる前から「ここを押せる」と読者に伝えることです。

1. aタグに専用のクラスを付けた
2. 背景色、枠線、余白、太字をCSSで指定した
3. :hoverでマウスを載せたときの変化を付けた
4. :focus-visibleでキーボード選択時の枠線を付けた
5. スマートフォンでは横幅いっぱいにした
6. body.homeでトップページだけに適用した
7. PC、スマートフォン、別ブラウザで確認した

WordPressやChatGPTの設定で迷っている方へ

「リンクがリンクだと分かりにくい」「追加CSSを入れても表示が変わらない」「スマートフォンではみ出す」など、WordPressでは画面やテーマの違いによって迷うことがあります。

私自身が実際に経験した内容をもとに、現在の画面や状況を確認し、必要な作業を一緒に整理しています。

ChatGPT・WordPressブログ作成の相談内容を見る →

※お問い合わせの時点では契約は成立しません。内容を確認したうえで、必要な範囲、進め方、料金などを個別にご案内します。

記事の先頭へ戻る ↑