wordpressを使っているときに、外部リンクに自動的にアイコンをつけたい場合がありますよね。
そんな時にどのような設定をすればいいのか、ということですが、一般的にはCSSを設定してしまうだけで大丈夫です。
既に運用しているウェブサイトの各リンクにいちいちclassを指定するのではなく、外部に向けたリンクの時は自動的に
このようなアイコンを一緒に表示するのが近年の流れですね。
こういったCSSを適用してあげると簡単に実現できます。
*:not(object):not(embed) a:not([href^="ブログのURL"]):not([href$=".jpg"]):not([href$=".png"]):not([href$=".gif"]):not(.elementor-button):not(.share-icon):not(.share-more):not([href='']):not(:has(img))::after {
content:" ";
background: url(アイコンのURL) no-repeat 100% 50%;
padding-right:24px;
min-height:24px;
}
上記コードのうち「ブログのURL」の部分には使用するウェブサイトのトップページURL（※wordpressの本体URLではなく）を入れてあげてください。例えばこのブログの場合はhttps://wednesdaylove.jp/などといったものです。
「アイコンのURL」の部分には、先ほどのアイコンのURLを入れます。
アイコンはこちらからダウンロードして使って構わないので、メディアにアップロードし、詳細情報からファイルのURLを確認してください。
右クリックでダウンロードと保存 →
:not()という表記が続いていますが、これは()ではない、という意味になります。また並べて:not(〇):not(□)このようにすることで〇ではなく□でもない、と条件を追加することとなります。
つまり
:not(object) objectタグでの埋め込みではなく
:not(embed) embedタグでの埋め込みでもなく
a （上記2個の要素の下ではない）リンク要素の中で
:not([href^="ブログのURL"]) リンク先が内部リンクではなく
:not([href$=".jpg"]):not([href$=".png"]):not([href$=".gif"]) リンク先が画像でもなく
:not(.elementor-button) elementorのボタンのクラスが割り当てられておらず
:not(.share-icon):not(.share-more) jetpackなどのシェアボタンのクラスが割り当てられてもなく
:not([href='']) 空のリンクでもなく
:not(:has(img)) リンクするものが画像でもない※
となっています。
必要に応じて足したり引いたりして使ってください。
内部リンクを相対参照している場合は:not([href^="."])も必要ですね。
これとは別にpdfファイルにはpdfアイコンをつけるように
a[href$=".pdf"]::after {
content:" ";
display: inline-block;
width: 24px;
height: 24px;
background: url(PDFアイコンURL) no-repeat;
min-height:24px;
}
などの併記もあるといいと思います。
PDFアイコンはadobeのウェブサイトで使用許諾を確認してから使ってください。
PDFロゴアイコンの入手先
もしくは、最初のCSSで:not([href$=".pdf"])を追加してもいいでしょう。
また画像ファイルに関しては.jpegや.webpなども使っている場合は適宜追加して使いましょう。