(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

リンクテキスト

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

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

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

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

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

修正内容は、

a:hover { /*リンクテキストホバー時アンダーライン表示*/

の箇所を

.post a:hover { /*リンクテキストホバー時アンダーライン表示*/

に変更と、

.blogcard-wrap.external-blogcard-wrap.a-wrap.cf,
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { /*ブログカード装飾無し*/
  text-decoration: none!important;
}

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

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

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

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

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

最後に

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

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

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】