回遊率アップ間違いなし！CSSで記事下のタグとカテゴリーのテキストリンクをボタン化してみた

2025年4月24日ブログ運営WordPress,Luxeritas,ChatGPT

Luxeritasは高速ですがシンプルなWordPressのテーマなので、リンクをボタン化する機能などは含まれていません。私のような素人にはやりたくても出来ませんが、ChatGPTなどのAIにお願いすればなんでもやってくれます！！

Contents

記事下の「カテゴリ」と「タグ」を見立たせたい
ChatGPT先生お願い！！
ChatGPT先生にお願いする方法
まとめ

記事下の「カテゴリ」と「タグ」を見立たせたい

私は、記事下に「カテゴリ」と「タグ」を表示させています。

これはユーザビリティ向上の意味もありますが、主に検索エンジン対策です。検索エンジンがこのページをクロールしたときに、カテゴリやタグ経由で巡回してくれればサイト内容を把握しやすくなるでしょ？ってあまり良く分かってないのですが。

しかし、この「カテゴリ」と「タグ」を見ていただければ分かると思いますが、テキストリンクなので全く目立ちませんよね。

カテゴリ一覧やタグ一覧をウィジェットで貼っても良いのですが、関連したリンク以外のものはあまり貼りたくないので、できればこの「カテゴリ」と「タグ」をう少し目立たせることは出来ないものだろうかと思いました。

ChatGPT先生お願い！！

先日も、ChatGPT先生に「アフィリエイトリンクのボタン化」をしていだきましたので、今回もお願いしてみよう！！

で、作ってもらったのがこれです！

おおおお、これは今までのテキストリンクよりは目立ちますね！！これなら記事を読んだあとにクリックしてくれる可能性もありますぞ！

ChatGPT先生にお願いする方法

ではどうやってChatGPT先生にお願いすれば良いのかといえばとても簡単です！！

まずは、ブラウザを右クリックし、「ページのソース」を表示し、ボタンにしたい部分のソースをChatGPTに貼り付け、「この部分のリンクを目立つようにボタン化して！」と指定するだけで簡単にコードを作ってくれます。

/* タグとカテゴリーを目立たせる */
.meta-box .meta .category a,
.meta-box .meta .tags a {
background-color: #000000; /* 背景色を黒に */
color: white; /* 文字色はそのまま白 */
padding: 0.4em 0.8em; /* 余白 */
border-radius: 999px; /* 丸みをつける */
font-weight: bold; /* 太文字 */
text-decoration: none; /* リンクの下線を消す */
transition: all 0.2s ease; /* ホバー時のアニメーション */
margin-right: 10px; /* 右側に余白を追加 */
margin-bottom: 10px; /* 下側に余白を追加 */
}

/* ホバー時に少し浮かせる */
.meta-box .meta .category a:hover,
.meta-box .meta .tags a:hover {
background-color: #333333; /* 濃い灰色に変化 */
transform: translateY(-2px); /* 少し浮かせる */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

/* アイコンのサイズを少し大きくする */
.meta-box .meta .category i,
.meta-box .meta .tags i {
font-size: 1.4rem;
margin-right: 0.5rem; /* アイコンとテキストの間にスペース */
}

このコードをCSS（「カスタマイズ」>「追加CSS」）に貼り付けるだけです。