カエレバ・ヨメレバ・トマレバのリンクに表示されるアイコンフォントを非表示にする方法【コピペで完了】

ブロガーにはおなじみ「カエレバ」「ヨメレバ」「トマレバ」を使用すると、WordPressテーマやブログサービスのデフォルトデザインの影響で、外部リンク（タイトル・クレジット表記・各ショップのリンク）にアイコンフォント（や）が自動挿入されることがあります。

「ブログ記事のテキストリンクはアイコンが表示されているほうがいいんだけど、カエレバ・ヨメレバ・トマレバ内のリンクからはアイコンを消したい」

当記事ではこのような悩みを解決すべく、CSSコピペだけでできる、カエレバ・ヨメレバ・トマレバ内のアイコンフォントを非表示にするカスタマイズ方法をご紹介します。

カエレバ・ヨメレバ・トマレバの外部リンクに表示されるアイコンフォント例
CSSカスタマイズでアイコンを消した後のデザイン
カエレバ・ヨメレバ・トマレバ内のアイコンフォントを非表示にするコード
- カエレバ・ヨメレバ・トマレバ内のアイコンフォントをすべて非表示にする方法
- カエレバ・ヨメレバ・トマレバ内のアイコンフォントを一部非表示にする方法
まとめ｜カエレバ・ヨメレバ・トマレバ内のアイコンフォントを非表示にするCSSカスタマイズ方法

カエレバ・ヨメレバ・トマレバの外部リンクに表示されるアイコンフォント例

カスタマイズ方法をご紹介する前に、まずはカエレバ・ヨメレバ・トマレバの外部リンクにアイコンフォントが表示されている例を確認しておきましょう。

デザインはCSSでカスタマイズしているものの、ブログ記事内の外部リンクに自動挿入されているアイコンフォントがカエレバ・ヨメレバ・トマレバ内にも表示されてしまっています。片方はその影響でレイアウトも崩れていますね。

もちろんアイコンフォントが表示されたまま使用してもいいのですが、なかにはカエレバ・ヨメレバ・トマレバ内では非表示にして、見た目をスッキリしたいという方もいらっしゃるでしょう。

CSSカスタマイズでアイコンを消した後のデザイン

当記事でこの後ご紹介するCSSカスタマイズを行うと、先ほど例としてご紹介したカエレバ・ヨメレバ・トマレバが次のように表示されます。

カエレバ・ヨメレバ・トマレバのアイコンフォントを非表示にしてスッキリしました。

アイコンフォントを消したのはカエレバ・ヨメレバ・トマレバ内だけで、その他ブログ記事内のリンクには引き続きアイコンが表示されるようにしています。

それでは続いてCSSカスタマイズ時のコードをご紹介します。いずれもCSSのコードを「style.css」にコピペすればカスタマイズできます。

カエレバ・ヨメレバ・トマレバ内のアイコンフォントを非表示にするコード

ブログによって外部リンクへアイコンフォント表示させる方法は異なりますが、一般的な方法（a要素への疑似要素「a::after」）を用いていれば以下のカスタマイズで消すことが可能です。

カエレバ・ヨメレバ・トマレバ内のアイコンフォントをすべて非表示にする方法

カエレバ・ヨメレバ・トマレバの外部リンクに表示されるアイコンフォントをすべて非表示にするなら以下のCSSコードを「style.css」にコピペしてください。(WordPressブログでしたら小テーマ推奨)

/* カエレバ・ヨメレバ・トマレバ全体のアイコンフォントを非表示 */
.kaerebalink-box a[target="_blank"]::after,
.booklink-box a[target="_blank"]::after,
.tomarebalink-box a[target="_blank"]::after {
	content: none;
}

カエレバ・ヨメレバ・トマレバ内の外部リンク（タイトル・クレジット表記・各ショップのリンク）すべてのアイコンフォントが非表示になります。

カエレバ・ヨメレバ・トマレバ内のアイコンフォントを一部非表示にする方法

カエレバ・ヨメレバ・トマレバの外部リンクに表示されるアイコンフォントのうち一部を非表示にするなら、以下のCSSを適宜「style.css」にコピペします。(WordPressブログでしたら小テーマ推奨)

▼個別指定する場合のコード全文

/* 商品名・書籍名・ホテル名のアイコンフォントを非表示 */
.kaerebalink-name>a[target="_blank"]::after,
.booklink-name>a[target="_blank"]::after,
.tomarebalink-name>a[target="_blank"]::after {
	content: none;
}
/* クレジット表記のアイコンフォントを非表示 */
.kaerebalink-powered-date a[target="_blank"]::after,
.booklink-powered-date a[target="_blank"]::after,
.tomarebalink-powered-date a[target="_blank"]::after {
	content: none;
}
/* 地図のアイコンフォントを非表示 */
.tomarebalink-address a[target="_blank"]::after {
	content: none;
}
/* 各ショップリンクのアイコンフォントを非表示 */
.kaerebalink-link1 a[target="_blank"]::after,
.booklink-link2 a[target="_blank"]::after, 
.tomarebalink-link1 a[target="_blank"]::after {
	content: none;
}

上記がコード全文です。

タイトル・クレジット表記・地図・各ショップリンクそれぞれ個別に指定し、アイコンフォントを非表示にします。

このなかから、非表示にしたい箇所だけ残してCSSをコピペしましょう。

▼各ショップリンクのみ非表示にする

例えば、各ショップリンクのみアイコンフォントを非表示にするなら以下の通りです。

/* 各ショップリンクのアイコンフォントを非表示 */
.kaerebalink-link1 a[target="_blank"]::after,
.booklink-link2 a[target="_blank"]::after, 
.tomarebalink-link1 a[target="_blank"]::after {
	content: none;
}

これで指定した部分だけアイコンフォントを消すことができます。

▼クレジット表記以外のアイコンフォントを非表示にする

今度はクレジット表記のところだけアイコンフォントをそのまま表示し、タイトル・地図・各ショップリンクのアイコンフォントを非表示にしてみます。

/* 商品名・書籍名・ホテル名のアイコンフォントを非表示 */
.kaerebalink-name>a[target="_blank"]::after,
.booklink-name>a[target="_blank"]::after,
.tomarebalink-name>a[target="_blank"]::after {
	content: none;
}
/* 地図のアイコンフォントを非表示 */
.tomarebalink-address a[target="_blank"]::after {
	content: none;
}
/* 各ショップリンクのアイコンフォントを非表示 */
.kaerebalink-link1 a[target="_blank"]::after,
.booklink-link2 a[target="_blank"]::after, 
.tomarebalink-link1 a[target="_blank"]::after {
	content: none;
}

これでクレジット表記以外のアイコンフォントを消すことができます。