お問い合わせ

プラグイン未使用!SWELLで外部リンクにアイコンを付けるカスタマイズ

ふと、記事内の外部リンクに外部リンクであることを示すアイコンを付けたいと思いました。

今まで意識したことは無かったのですが、アイコンがあった方がリンクであることがより明確になるメリットがあるのでは?と思ったからです。

この記事では、プラグイン未使用で外部リンクにアイコンを付けるカスタマイズをご紹介します。

こんな感じで表示されます。

例:Googleに嫌われる確実な方法

目次

Cocoonにある外部リンクにアイコンを付ける機能

Cocoonには外部リンクにiconフォントのアイコンを付ける設定があります。

また、Cocoonには外部リンクを一律nofollowにする設定もあります。

Cocoonは多機能すぎて公式の記事が見当たらないのですが、スクリーンショットをお見せします。

一方、SWELLは外部リンクをnofollowにする設定もなければ、外部リンクにアイコンを付ける機能もありません。

外部リンクを一律nofollowにする方法は、以下の記事で書きました。

SWELLでも外部リンクにアイコンを付けるカスタマイズ

wp_nav_menuのリンクにclassを追加する

前準備として、wp_nav_menuのリンクにclassを追加しておきます。

このカスタマイズをしなくても、後述するCSSの除外設定でセレクタを指定すれば問題は起きません。

外部リンクにアイコンを追加するCSSを追加

外部リンクの判定は、PHPではなくCSSだけで行います。

考え方としては、すべてのリンクにアイコンを設定し、その後、内部リンクやアイコンを表示したくないリンクについてはアイコンを表示しないようにします。

サイトのURLは適宜変更のこと。

SVGアイコンの色はfill='%231176d4の部分を変更します。%23#のことです。

a[href^="http"]:after,
a[href^="//"]:after{
	margin: 0 3px 0 3px;
	display: inline-block;
	width: .85rem;
	height: .85rem;
	content:"";
	background-position:0px 1px;
	background-repeat:no-repeat;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%231176d4'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
}
a[href^="https://yurugp2017-nagashima.com"]:after,
#wpadminbar a:after,
.wp-block-image a:after,
.swell-block-button a:after,
a[class*="menu-link"]:after,
a[class*="c-iconList__link"]:after,
a[class*="c-shareBtns__btn"]:after,
/*a[class*="c-blogLink"]:after,*/
a[class*="p-blogCard__title"]:after
 {
  margin: unset;
	display: unset;
	width: unset;;
	height: unset;
	content:unset;
	background-position:unset;
	background-repeat:unset;;
background-image: unset;
}

注意点

外部リンクアイコンを表示しないための除外設定は、自分が使う範囲で問題があると思ったものしかリンクを足していません。

ご自身の意図とは異なる場所に外部リンクのアイコンが表示されてしまった場合は、適宜セレクタで除外してください。

aタグにclassが付いている場合は、a[class*="class名"]:after、aタグにclass名が無い場合は親セレクタを追加して、親セレクタ a:afterを追加すれば大丈夫です。

CSSで除外したもの

  • imgタグのaタグが外部画像の場合
  • メニュー内のリンク
  • 著者プロフィールとかのアイコン
  • SNSシェアボタン
  • ブログカード

まとめ

SWELLはfontawesomeを読み込まないのが基本で、代わりにSWELLアイコンが用意されています。

しかし、SWELLアイコンには、外部リンク用のアイコンが用意されていないので、fontawesomeを読み込むことを考えますが、1つのアイコンのためにfontawesomeを読み込むのも嫌なのです。

この記事のカスタマイズでは、SVGアイコンで疑似要素で配置し、かつCSSだけで閉じて外部リンクアイコンを表示できるようにしました。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次