WordPressCocoon

【Cocoon】リンクテキストをカスタマイズする

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

リンクテキスト

WordPressテーマ Cocoonで使われている「リンクテキスト」のカスタマイズについてまとめてみました。

テーマCocoonのリンクテキスト

WordPressテーマ Cocoonで使われている「リンクテキスト」は、常にアンダーラインが表示されている設定となっています。

【WordPress】リンクテキストをカスタマイズする

また、ラベル類(シェアボタン、フォローボタン、カテゴリラベル、タグラベルなど)内で使われているリンクテキストについては、常にアンダーラインの表示が無い設定となっています。

好みの問題ですが、自分の場合、通常アンダーラインが表示されていない設定(文字色だけ違うのみ)で、「リンクテキスト」にホバーしたときのみアンダーラインが表示される設定が好みです。

リンクテキストのカスタマイズ

そこで、通常時にアンダーラインの表示を無くし(文字色だけ違うのみ)、「リンクテキスト」にホバーした時アンダーラインが表示されるカスタマイズを行ってみました。

カスタマイズ内容

「アンダーライン」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■リンクテキスト カスタマイズ
************************************/
a{ /*リンクテキスト装飾無し*/
  text-decoration: none;
}
a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: underline;
}
.share-button{ /*シェアボタン装飾無し*/
  text-decoration: none!important;
}
.follow-button{ /*フォローボタン装飾無し*/
  text-decoration: none!important;
}
.cat-link{ /*カテゴリーラベル装飾無し*/
  text-decoration: none!important;
}
.tag-link{ /*タグラベル装飾無し*/
  text-decoration: none!important;
}

カスタマイズ後のリンクテキスト

今回のカスタマイズによって、「リンクテキスト」は、

  1. 通常時リンクテキストのアンダーラインの表示無し(文字色が違うのみ)
  2. 「リンクテキスト」にホバーしたときのみアンダーラインを表示
  3. シェアボタン内のリンクテキストのアンダーライン常に無し
  4. フォローボタン内のリンクテキストのアンダーライン常に無し
  5. カテゴリーラベル内のリンクテキストのアンダーライン常に無し
  6. タグラベル内のリンクテキストのアンダーライン常に無し

となりました。

【WordPress】リンクテキストをカスタマイズする

最後に

「リンクテキスト」にアンダーラインの表示が無くなったお陰でスッキリとした表示となりました。

アンダーラインが無くなったため若干リンクテキストが分かりにくくなったのですが、通常の文章と「リンクテキスト」は文字色が違うので迷うことは無いと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント