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

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

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

SWELL|テキストリンク

SWELL|テキストリンク

にゃのらいとにゃのらいと

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

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

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

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

SWELL|テキストリンク

SWELL|テキストリンク

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

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

①エディター設定を開く

左メニューにある

SWELL設定 > エディター設定

を選択。

SWELL|SWELL設定 > エディター設定

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

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

SWELL|カスタム書式タブ

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

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

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

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

なお、クラス名は、swl-format-1swl-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|カスタム書式用CSS

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

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

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

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

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

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

にゃのらいとにゃのらいと

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

以上、SWELLのカスタム書式を設定し、リンクテキストにマウスオーバーしたときに色を変えたり、アニメーションを追加する方法でした。

SWELLを効率的に学んで最速でサイトを作るには?

ワードプレステーマのSWELLを効率的に学んで、最速でサイトを作成するには、オンライン講座のUdemyで学ぶのが最適です。

Udemy(ユーデミー)」は、世界中で人気のあるオンライン学習プラットフォームで、日本ではベネッセ(Benesse)と提携して運営をしています。

日本最大のオンライン学習のプラットフォームだけあって、ワードプレステーマのSWELLを学べる講座がいくつか用意されています。

【SWELL】WordPressで「アクセス解析しやすいWebサイト」を作る|ビジネス成果を上げる企業サイトの作り方

※画像は講座へのリンクになっています

【WordPress】企業サイト制作マスターコース|SWELLで作るコーポレートサイト

※画像は講座へのリンクになっています

なお、Udemyでは定期的にセールを開催しています。

セール時は通常価格より、90%以上の値引きされた価格で購入する事ができます。

新規受講生割引などがある場合もありますので、まずは公式サイトで確認してみてください。