リンクテキスト
WordPressテーマ Cocoonで使われている「リンクテキスト」のカスタマイズについてまとめてみました。
テーマCocoonのリンクテキスト
WordPressテーマ Cocoonで使われている「リンクテキスト」は、常にアンダーラインが表示されている設定となっています。
また、ラベル類（シェアボタン、フォローボタン、カテゴリラベル、タグラベルなど）内で使われているリンクテキストについては、常にアンダーラインの表示が無い設定となっています。
好みの問題ですが、自分の場合、通常アンダーラインが表示されていない設定（文字色だけ違うのみ）で、「リンクテキスト」にホバーしたときのみアンダーラインが表示される設定が好みです。
リンクテキストのカスタマイズ
そこで、通常時にアンダーラインの表示を無くし（文字色だけ違うのみ）、「リンクテキスト」にホバーした時アンダーラインが表示されるカスタマイズを行ってみました。
カスタマイズ内容
「アンダーライン」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(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;
}
カスタマイズ後のリンクテキスト
今回のカスタマイズによって、「リンクテキスト」は、
- 通常時リンクテキストのアンダーラインの表示無し（文字色が違うのみ）
- 「リンクテキスト」にホバーしたときのみアンダーラインを表示
- シェアボタン内のリンクテキストのアンダーライン常に無し
- フォローボタン内のリンクテキストのアンダーライン常に無し
- カテゴリーラベル内のリンクテキストのアンダーライン常に無し
- タグラベル内のリンクテキストのアンダーライン常に無し
となりました。
最後に
「リンクテキスト」にアンダーラインの表示が無くなったお陰でスッキリとした表示となりました。
アンダーラインが無くなったため若干リンクテキストが分かりにくくなったのですが、通常の文章と「リンクテキスト」は文字色が違うので迷うことは無いと思います。
コメント