SWELLでリンクテキストにマウスオーバーしたときに色を変える方法

※当サイトにはプロモーションが含まれています。

ワードプレス（WordPress）テーマのSWELL（スウェル）で、普通にリンクテキストを作成した場合、カーソルがマウスオーバーしても何も変わりありません。

SWELL｜テキストリンク

にゃのらいと

これだと、リンクなのかがわかりにくいにゃ

そのため、SWELL（スウェル）には、「カスタム書式」という他のワードプレステーマにはない独自の機能があります。

このカスタム書式を使うと、自分がよく使う文字の装飾パターンなどを登録しておくことができます。

今回、この機能を使って、SWELLのリンクテキストにカーソルがマウスオーバーしたときのホバーアクションを加えたいと思います。

SWELL｜テキストリンク

この記事の目次

リンクテキストにマウスオーバーしたときに色を変える方法

リンクテキストにマウスオーバーしたときに色を変える方法

リンクテキストにマウスオーバーしたときに色を変えたり、アニメーションを追加する方法です。

①エディター設定を開く

左メニューにある

SWELL設定 > エディター設定

を選択。

②カスタム書式タブを選択

上部のタブメニューにある「カスタム書式」を選択します。

SWELL｜カスタム書式タブ

③カスタム書式の表示名を入力

カスタム書式の表示名を入力します。

今回は、「カスタムリンク」という名称にします。

なお、クラス名は、swl-format-1、swl-format-2固定となっているので、このクラスに対してCSSを記載することになります。

④カスタム書式用CSSに記載

リンクテキストにマウスオーバーした時に色を変えたり、アニメーションを追加するCSSです。

.swl-format-1 a {
position: relative;
text-decoration: none;
color: #000d99;
}

.swl-format-1 a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #1a40cc;
transform: scale(0, 1);
transform-origin: right center;
transition: transform 0.3s;
display: block;
}

.swl-format-1 a:hover,
.swl-format-1 a:focus {
color: #1a40cc;
}

.swl-format-1 a:hover::after,
.swl-format-1 a:focus::after {
transform-origin: left center;
transform: scale(1, 1);
}

上記のCSSをコピーして、「カスタム書式用CSS」に記載します。

なお、このCSSでは通常のリンクの色も、#000d99（濃い青）に変更しています。

⑤カスタム書式で作成したリンクの使い方

カスタム書式で作成したリンクを使うときは、テキスト装飾メニューにある「SWELLのアイコン」を選択します。

すると、先程作成した「カスタムリンク」があると思うので選択します（swl-format-*のクラスが付与されます）。

SWELL｜テキスト装飾メニュー > カスタムリンク

続いて、リンクアイコンを選択し、通常通りURLを入力します。

これで、追加したCSSの装飾が適用されているはずです。

にゃのらいと

Gutenbergのエディター上でも確認できるのがうれしいにゃ！

他のリンクの下線アニメーションを作ってみたい場合、下記の記事も参考にしてみてください。

グローバルナビに最適！リンクの下線アニメーションのCSS
https://best-item.work/css/underline-animation/
リンクにホバーアニメーションを加えることで、クリック率を高める効果があると言われています。今回は、基本的な「リンクにホバー時に下線がスライドする」アニメーションを作成したので、備忘録として残しておきます。リンクの下線 …