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

リンクテキスト

以前エントリー記事としてアップした「【WordPress】リンクテキストをカスタマイズする」で、「リンクテキスト」のアンダーラインの表示を無くし（文字色だけ違うのみ）、マウスカーソルをホバーした時にアンダーラインが表示されるカスタマイズを行いました。

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

WordPressテーマ Cocoonの【リンクテキスト】を、通常時にアンダーラインの表示を無くし（文字色だけ違うのみ）、【リンクテキスト】へホバーした時にアンダーラインが表示されるカスタマイズについて書いたエントリー記事です。

masaa.net

2018.11.06

今回この仕様を変更したいと思います。

以前カスタマイズを行ったリンクテキスト

以前エントリー記事としてアップした「【WordPress】リンクテキストをカスタマイズする」を行うことで、人気記事ランキングや関連記事、ページ送りナビなどのテキストに対しても、マウスカーソルをホバーした時にアンダーラインが表示されてしまいます。

この場合、マウスカーソルをホバーすると背景色が変化するので、リンクテキストに対してアンダーラインの表示は必要ないと判断しました。

そこで、記事内のテキストリンク限定でマウスカーソルをホバーすると、リンクテキストに対してアンダーラインを表示するように変更します。

但し、記事内であってもブログカードについては、リンクテキストに対してアンダーラインを表示させません。

カスタマイズ内容

以前エントリー記事としてアップした「【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;
}

このカスタマイズを、下記の通りに変更します。

/************************************
** ●リンクテキスト カスタマイズ
************************************/
a{ /*リンクテキスト装飾無し*/
  text-decoration: none;
}
.post 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;
}
.blogcard-wrap.external-blogcard-wrap.a-wrap.cf,
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { /*ブログカード装飾無し*/
  text-decoration: none!important;
}

修正内容は、

の箇所を

に変更と、

を追加した2点となります。

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

これで、マウスカーソルをホバーするとリンクテキストに対してアンダーラインが表示されるのは、記事内のリンクテキストに限定されます。

記事内のブログカードについては、マウスカーソルをホバーすると背景色が変わるので、リンクテキストに対してアンダーラインを表示させないようにしました。

その他のリンクテキストはマウスカーソルをホバーしても、アンダーラインが表示されることはありません。

最後に

今後も以前カスタマイズ行った部分に対して気になる点が発生した場合、再度修正してカスタマイズを行っていきたいと思います。