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

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

この記事のURLをコピーする

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

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

当記事ではこのような悩みを解決すべく、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コピペでカエレバ・ヨメレバ・トマレバ内のアイコンフォントをだけをすべて非表示にする方法

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

カエレバ・ヨメレバ・トマレバの外部リンクに表示されるアイコンフォントのうち一部を非表示にするなら、以下の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;
}

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

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

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

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

/* 商品名・書籍名・ホテル名のアイコンフォントを非表示 */
.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;
}

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

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

※当記事では初心者の方でもわかりやすいように、あえてタイトル・クレジット表記・地図・各ショップリンクをわけて記載しています。

スポンサーリンク

まとめ|カエレバ・ヨメレバ・トマレバ内のアイコンフォントを非表示にするCSSカスタマイズ方法

当記事では、外部リンクにアイコンフォントを表示させる一般的な方法(a要素へ疑似要素「a::after」を使っている)ブログ向けに、カエレバ・ヨメレバ・トマレバ内の外部リンクアイコンだけを非表示にするカスタマイズ方法をご紹介しました。

CSSコピペだけでカスタマイズできるので、どうぞお試しください。

しかし、アイコンフォントといっても表示のさせ方は一つではありません。ブログによっては当記事で紹介した方法を試してもうまく反映されない部分があるかもしれません。

そのためカスタマイズの際は、事前に必ずバックアップを行いましょう。またカスタマイズは自己責任にてお願いします。

カエレバ・ヨメレバ・トマレバのデザインカスタマイズでしたら以下の記事をあわせてお読みください。

HTMLやCSS初心者でしたらまずは書籍で基本をおさえておきましょう。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください