WordPressCocoon

【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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

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



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

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

MASAa.net

コメント