この記事では、SWELLでテキストリンクに下線を付ける方法や、マウスをホバーした時に使用するCSSプロパティについて詳しく解説します。
ワードプレスのテーマである「SWELL」を使っている場合、テキストリンクに下線をつける方法や、ホバー時にどのような装飾（着色）をするかについて知ることは重要です。
テキストリンクの色やスタイルについてもカスタマイズする方法を紹介しますので、SWELLを使っている方は、ぜひチェックしてみてください。
SWELLでテキストリンクに下線をつける方法
WordPressテーマ「SWELL」では、デフォルトでテキストリンクに下線がつかないように設定されています。
でも、もうすこし目立たせたいので下線をつけたいという方もいるでしょう。
というより、一般的には、テキストリンクに下線をつけることが多く、ユーザーにとっても視覚的に分かりやすいと思います。
下線があることで、ユーザーはそのテキストがクリック可能であることを認識しやすくなり、クリックするためのハードルも下がるのではないでしょうか。
こんな考えで私は、テキストリンクに下線をつけるようにしています。
なお、テキストリンクに下線があることで、文章中の他の下線と混同されることがあるため、デザイン上の理由で下線をつけないほうがよい場合もあります。
その場合は、ホバー時に下線が表示されるなど、代替の方法で対処することが望ましいです。
テキストリンクに下線を付ける設定
まず、下記のようにリンクの下に下線をつける場合の設定方法を説明します。
>> お問い合わせはこちら
- ワープレスの左側サードバーのメニューより「外観」⇒「カスタマイズ」の順にクリックする
- 「投稿・固定ページ」をクリック
- 「コンテンツデザイン」をクリック
- 下の方へスクロールして「テキストリンクにアンダーラインを付ける」にチェックを入れ「公開」ボタンをクリックする
これで、テキストリンクに下線を付ける設定は完了です。
リンクの下に下線をつけるだけなら、下記のようなCSSを設定しなくても、上記の方法で可能です。
WELLでテキストリンクにホバー時の装飾を追加する方法
テキストリンクにホバー時の装飾を追加するには、CSSを編集してください。以下の手順で行います。
- WordPressのダッシュボードにログインします。
- 左側のメニューから「外観」を選択し、「カスタマイズ」をクリックします。
- カスタマイズ画面で、「追加CSS」をクリックします。
- ここで、テキストリンクにホバー時の装飾を追加するCSSを記述します。（下記の枠の中をコピー）
- CSSを記述したら、「公開」ボタンをクリックして変更を保存します。
- ウェブサイトを表示し、テキストリンクにカーソルを合わせて、ホバー時の装飾が追加されていることを確認します。
下記の枠内のテキストリンクにマウスをホーバーするとオレンジ色に変わります。
>> お問い合わせはこちら
テキストリンクにホバー時の装飾（オレンジ色に変化）を追加するCSS
a:hover {
color: #FFA500; /* ホバー時のリンクの色をオレンジに変更 */
text-decoration: underline; /* 下線を追加 */
}
上記のCSSでは、ホバー時にオレンジ色に変化するように、「color: #FFA500;」と設定してあります。
他の色に変えたいときは＃の数値を調整してください。
例えば、ホバー時に赤色に変化させたいときは、「#FF0000」とします。
特定のセレクタやクラスに対して適用したい場合は、セレクタやクラス名を追加
例えば、投稿内のリンクにのみホバー時の装飾を適用する場合、以下のようにCSSを記述します。
テキストリンクをホバーした時のリンク色をオレンジに変更するCSS
.entry-content a:hover {
color: #FFA500; /* ホバー時のリンクの色をオレンジに変更 */
text-decoration: underline; /* 下線を追加 */
}
この方法で、SWELLのテキストリンクにホバー時の装飾を追加できます。
ホバー時のリンクのテキスト色を白に変更し、かつリンクの背景色をオレンジに変更するCSS
.entry-content a:hover {
color: #FFFFFF; /* ホバー時のリンクのテキスト色を白に変更 */
background-color: #FFA500; /* ホバー時のリンクの背景色をオレンジに変更 */
text-decoration: none; /* 下線を削除 */ padding: 2px 4px; /* リンクの周りに少し余白を追加 */
}
※ ホバー時の装飾を変更する際には、上記のCSSを調整することで色やスタイルを自由にカスタマイズしてください。
まとめ
この記事では、SWELLを使ったテキストリンクの装飾について、以下のことを紹介しました。
- テキストリンクに下線をつける方法
- ホバー時にテキストリンクを着色する方法
- テキストリンクの色やスタイルをカスタマイズする方法
これらの方法を覚えることで、SWELLを使用したワードプレスサイトで、より魅力的で視認性の高いテキストリンクを作成することができます。
ユーザーがテキストリンクをクリックしやすくするために、上記の方法を活用してさらに改善していきましょう。
