CSSの擬似要素（疑似要素）とSVGアイコンを使って外部リンクにアイコンをつけてみました。
外部リンクに対してこんなアイコンがついています。（表示そのものをやめるかもしれませんし、デザイン変更があるかもしれないので、記事公開時のものです）
大まかな手順
- セレクターでアイコンを表示する範囲を指定
- :not()をつかって除外するリンクを追加
- SVGアイコンを用意
- SVGアイコンのコードをURLエンコード
- 色、大きさ、位置を調整
HTMLを編集します。必ずバックアップを取ってから作業してください。
セレクターでアイコンを表示する範囲を指定
サイドバー、フッターなど除いて、記事部分にのみ適用されるようにしました。
テンプレートQooQの例
#single-content a
:not()をつかって除外するリンクを追加
除外するリンクは以下のものにしました。
- 内部リンク
- 画像
- ブログカードの画像
- アフィリエイト
ということなので、セレクターを愚直に追加していきました。
内部リンク
URL https://sutasutashiki.blogspot.com/の部分は適宜置き換えてください。
通常ならば部分文字列一致セレクターをつかって、
:not([href^="https://sutasutashiki.blogspot.com/"])だけで十分です。
しかし過去記事を見たところhttpsとhttpが混在。さらにblogspot.comとblogspot.jpが混在していました。
したがって
:not([href^="https://sutasutashiki.blogspot.com/"]):not([href^="http://sutasutashiki.blogspot.com/"]):not([href^="https://sutasutashiki.blogspot.jp/"]):not([href^="http://sutasutashiki.blogspot.jp/"])
が必要になります。
ひとつずつ書いてもOKですが、やや冗長さを感じたため
:not([href*="sutasutashiki.blogspot"])
としました。
もっと効率の良い書き方があると思いますが、調査不足でわかりませんでした。
効率の良い書き方や、問題が出たら書き換えようと考えています。
画像
画像もjpg,JPG,png,PNGなど、大文字と小文字が混在していました。
:not([href$=".jpg"]):not([href$=".JPG"]):not([href$=".png"]):not([href$=".PNG"]):not([href$=".gif"]):not([href$=".GIF"])- ......
と、こちらもひとつずつ書くことができますが、
:not([href$=".jpg" i]):not([href$=".png" i]):not([href$=".gif" i])
にしました。
*過去記事に拡張子jpegのリンクがあったので:not([href$=".jpeg" i])と、一応-:not([href$=".webp" i])も追加しました。
ブログカードの画像：:not(.blogCardImg__wrap a)
アフィリエイト：:not(.cstmreba a):not(.easyLink-arrow-left):not(.easyLink-arrow-right)
を追加。
*可読性のため、セレクターを改行して書いたところ上手く動きませんでした。1行で（改行なしで）書く必要がありそうです。（つまづきました。）
SVGアイコンを用意
SVGアイコンは無料アイコン素材｜ICON BOX｜の新規ウィンドウ矢印のアイコン | 無料アイコン素材｜ICON BOX｜にしました。
ダウンロードしたファイルを適当なテキストエディターで開きます。
例：上記新規ウィンドウ矢印のアイコン | 無料アイコン素材｜ICON BOX｜をテキストエディターで開いた中身
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.a,.b{fill:none;}.b{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>125_arr_24</title><rect class="a" width="48" height="48"/><polyline class="b" points="27 12 36 12 36 21"/><polyline class="b" points="32 26 32 34 14 34 14 16 22 16"/><line class="b" x1="24" y1="24" x2="35" y2="13"/></svg>
URLエンコード
CSSで扱えるようにエンコードします。
URL-encoder for SVGのInsert SVGにファイルの中身をコピぺ、Ready for CSSに生成されたコードをコピー。
例：上記新規ウィンドウ矢印のアイコン | 無料アイコン素材｜ICON BOX｜をURL-encoder for SVGでURLエンコードしたもの。
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E125_arr_24%3C/title%3E%3Crect class='a' width='48' height='48'/%3E%3Cpolyline class='b' points='27 12 36 12 36 21'/%3E%3Cpolyline class='b' points='32 26 32 34 14 34 14 16 22 16'/%3E%3Cline class='b' x1='24' y1='24' x2='35' y2='13'/%3E%3C/svg%3E");
background-colorで色を変更したいので、プロパティをbackground-imageからmask-imageと-webkit-mask-imageに変更。
mask-image
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E125_arr_24%3C/title%3E%3Crect class='a' width='48' height='48'/%3E%3Cpolyline class='b' points='27 12 36 12 36 21'/%3E%3Cpolyline class='b' points='32 26 32 34 14 34 14 16 22 16'/%3E%3Cline class='b' x1='24' y1='24' x2='35' y2='13'/%3E%3C/svg%3E");
-webkit-mask-image
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E125_arr_24%3C/title%3E%3Crect class='a' width='48' height='48'/%3E%3Cpolyline class='b' points='27 12 36 12 36 21'/%3E%3Cpolyline class='b' points='32 26 32 34 14 34 14 16 22 16'/%3E%3Cline class='b' x1='24' y1='24' x2='35' y2='13'/%3E%3C/svg%3E");
色、大きさ、位置を調整
数値などは適宜調整。
display: inline-block;
vertical-align: -.65em;
margin-left: -.5em;
width: 2em;
height: 2em;
content:"";
background-color: #003FEB;
完成したもの
/* セレクターで適用する範囲、:not()をつかって除外するリンクをそれぞれ指定 */
#single-content a:not([href*="sutasutashiki.blogspot"]):not([href$=".jpg" i]):not([href$=".png" i]):not([href$=".gif" i]):not([href$=".jpeg" i]):not([href$=".webp" i]):not(.cstmreba a):not(.blogCardImg__wrap a):not(.easyLink-arrow-left):not(.easyLink-arrow-right)::after {
/* 色、大きさ、位置を調整 */
display: inline-block;
vertical-align: -.65em;
margin-left: -.5em;
width: 2em;
height: 2em;
content: "";
background-color: #003FEB;
/* SVGをURLエンコードしたものを貼り付け */
/*!
© ICON BOX - https://iconbox.fun/
LICENCE - https://iconbox.fun/about/#LICENSE
https://iconbox.fun/%e6%96%b0%e8%a6%8f%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e7%9f%a2%e5%8d%b0%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3-2/
*/
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E125_arr_24%3C/title%3E%3Crect class='a' width='48' height='48'/%3E%3Cpolyline class='b' points='27 12 36 12 36 21'/%3E%3Cpolyline class='b' points='32 26 32 34 14 34 14 16 22 16'/%3E%3Cline class='b' x1='24' y1='24' x2='35' y2='13'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E125_arr_24%3C/title%3E%3Crect class='a' width='48' height='48'/%3E%3Cpolyline class='b' points='27 12 36 12 36 21'/%3E%3Cpolyline class='b' points='32 26 32 34 14 34 14 16 22 16'/%3E%3Cline class='b' x1='24' y1='24' x2='35' y2='13'/%3E%3C/svg%3E");
}
/* (.cstmreba a):カエレバ、ヨメレバ */
/* (.blogCardImg__wrap a):ブログカードの画像 */
/* (.easyLink-arrow-left):もしもアフィリエイトeasyLink-box */
/* (.easyLink-arrow-right):もしもアフィリエイトeasyLink-box */
コメントなし: