すたすた式
Blogger QooQ
CSSの擬似要素（疑似要素）とSVGアイコンを使って外部リンクにアイコンをつけてみました。
外部リンクに対してこんなアイコンがついています。（表示そのものをやめるかもしれませんし、デザイン変更があるかもしれないので、記事公開時のものです）
HTMLを編集します。必ずバックアップを取ってから作業してください。
サイドバー、フッターなど除いて、記事部分にのみ適用されるようにしました。
テンプレートQooQの例
#single-content a
除外するリンクは以下のものにしました。
属性セレクターが使えます。また、
複数のセレクターを指定することは実験的な機能で、広くは対応されていません。
ということなので、セレクターを愚直に追加していきました。
URL https://sutasutashiki.blogspot.com/の部分は適宜置き換えてください。
https://sutasutashiki.blogspot.com/
通常ならば部分文字列一致セレクターをつかって、
:not([href^="https://sutasutashiki.blogspot.com/"])だけで十分です。
:not([href^="https://sutasutashiki.blogspot.com/"])
しかし過去記事を見たところhttpsとhttpが混在。さらにblogspot.comとblogspot.jpが混在していました。
https
http
blogspot.com
blogspot.jp
したがって
: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など、大文字と小文字が混在していました。
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])も追加しました。
jpeg
:not([href$=".jpeg" i])
-:not([href$=".webp" i])
ブログカードの画像：:not(.blogCardImg__wrap a)
:not(.blogCardImg__wrap a)
アフィリエイト：:not(.cstmreba a):not(.easyLink-arrow-left):not(.easyLink-arrow-right)
:not(.cstmreba a):not(.easyLink-arrow-left):not(.easyLink-arrow-right)
を追加。
*可読性のため、セレクターを改行して書いたところ上手く動きませんでした。1行で（改行なしで）書く必要がありそうです。（つまづきました。）
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>
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に変更。
background-color
background-image
mask-image
-webkit-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: 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 */
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿