【SWELL】マウスオーバー時にリンクテキストの色を変える方法

当ページのリンクには広告が含まれています。
リンクカラー

こんにちは!カイマイママです。

リンクテキストにマウスを乗せたとき(マウスオーバーしたとき)、文字の色が変わると、リンクテキストだとわかりやすいですよね。

カイマイママ

ブログのホームはこちら ←試しにマウスを乗せてみてください。

チビ

かなりわかりやすいね!

このページでは、マウスオーバーしたときにリンクテキストの色を変える方法をサクッと紹介します!

目次

カスタム書式を設定する

STEP
SWELL設定の①エディター設定を開く

カスタム書式をクリックします。

リンクカラー1
STEP
カスタム書式の表示名とCSSを入力する
リンクカラー2

カスタム書式-1表示名にわかりやすい名称を入力します。

カスタム書式用CSSに、下記のように入力します。

1 → .swl-format-1 a:hover{

2 → color: #〇〇〇〇〇〇;  (〇にはお好みのカラーコードを入力してください)

3 → }

入力したら、下にある変更を保存をクリックしましょう。

カスタム書式の使い方

投稿記事のリンクテキストを設定したい場所に、文字を入力します。

今回は、『このリンクテキストの色を変える』と入力しました。

リンクを設定したい文字を選択し、⑥SWELLのロゴをクリック。⑦先ほど作成した『リンクカラー変更』をクリックします。

そのまま、⑧リンクボタンをクリック。⑨URLを入力し、右の矢印または、キーボードのenterを押します。すると、

このように↓↓↓完成します。

このテキストリンクの色を変える

チビ

マウスオーバーする前は青色なんだね。

カイマイママ

カイマイママは元々のリンクカラーを青色に設定してるよ。

マウスオーバー前のリンクカラー設定方法

外観 → ②カスタマイズ → ③サイト全体設定 → ④基本カラー → ⑤リンクカラーと選択すると、お好みのカラーを設定することができます。

リンクカラー3

まとめ

今回は、リンクテキストにマウスを乗せたとき(マウスオーバーしたとき)、リンクテキストの色を変える方法を紹介しました。

リンクの色が変わると視認性が高くなるのでおすすめです。

お好みの色を設定して、ぜひ見栄えのよいリンクテキストを作ってみてください!

よかったらシェアしてね
  • URLをコピーしました!
目次