Luxeritas の外部リンクアイコンを、特定のURLへのリンクから外す方法
Luxeritasだと、「カスタマイズ（外観）⇒外部リンク」にて簡単に外部リンクにアイコンを付けることが可能ですが、カエレバなどを利用していると、そこにもアイコンが自動で表示されてしまうので、デザインが崩れてしまうのが気になっています。
こんな質問をいただきました。
外部リンクアイコン を付ける設定をした状態で、特定の外部リンクだけそのアイコンを外したいということですね。
Luxeritas の外部リンクアイコンは a 要素ではなく、そのうしろに置いた span に付加しているため、a::after のCSS操作では消すことができません。
最初はCSSだけで処理するのは無理かなと思ったのですが、ちょっと工夫したらうまくいったのでやり方を掲載しておきます。
かなりニッチなのであまり必要とする人はいないかもしれませんが、参考になればということで。
外部リンクアイコンを特定のURLへのリンクから外す方法
結論から書いてしまうとやることは２つ
１.Luxeritasの子テーマのCSSを書き加える
▼プロトコルを指定する場合（URLに http: https: をつける)
.external[href^="https://www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href^="https://hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}valuecommerceのリンクもあるなら、それも http 以下の部分を書き換えて追加してください。
▼プロトコルを指定しない場合(URLに http: をつけずに //ドメイン名 にしたいとき)
.external[href*="www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href*="hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}^を*に変えて、ドメインから始める形にします。
２．外観カスタマイザーの外部リンク設定を変更する
外観カスタマイザーの外部リンク設定ではexternalをつけるにチェックを入れてください。↓
☑記事の外部リンクに class="external" をつける
☑記事の外部リンクにアイコン付ける
これだけでOK。
解説
Luxeritas では、外部リンクを別ウインドウで開いたり、リンク文字列のうしろにアイコンをつけて目立たせる設定を外観カスタマイザーから行うことができます。
プラグインを使わずにリンクの後ろに外部リンクを示すアイコンをつけて目立たせることができる優れものです。
外部リンクアイコンがあると一目で別サイトに飛ぶと分かるので利用者の便利からすると嬉しいのです、が。カエレバ、ヨメレバなどのように、リンクを含めてデザインされている場合はレイアウトが崩れる原因になるという副作用があります。
そんな時は特定のURLへのリンクからアイコンを外したくなります。
で、一般的に用いられている a 要素への疑似要素を使った a::after なら
a[href^=”https://www.amazon.co.jp”]::after{content: "";}これで消してやればいいのですが、Luxeritas はリンクのうしろに置いた span に疑似要素::afterを設定してアイコンを表示させています。
<a href="https://www.amazon.co.jp/" class="external">amazon商品リンク</a><span class="ext_icon"></span>
別の要素でアイコンを付与しているので a 要素をいくらいじっても意味がない。
となると、アイコンを外す対象のURLを判別して、その後ろにあるspanを書き換える必要があります。
疑似要素とは疑似要素は、HTMLに書かれていない要素をCSSから付け加えることのできる特殊な要素のこと。
疑似要素は、元となる要素やクラスなどのうしろにコロンを二つ並べて、その後にbeforeやafterをつけ加えます。
.external::before{content="疑似要素ですがなにか？";}
疑似要素を使うことで、リストの前にアイコンを自動で付け加えたり、吹き出しっぽい表現をCSSだけで表現できます。
似た概念として、コロン : がひとつだけの擬似クラスがあります。マウスカーソルがリンクの上に乗っかったときに色を変えるのに使われるあれです。
後ろの要素を指定できるCSSセレクタ： ~
CSSセレクタ ～ を使うと、ある要素のうしろにある要素を選択できます。
要素A ~ 要素B と書けば、要素Aのうしろにある要素Bが選べるというわけ。
今回は class に external を含み、かつ特定のURLを含む 要素A の後ろにある span を選びたいので下のようにしたというわけ。
.external[href^="http://www.amazon.co.jp"] ~ span.ext_icon::after{content: "";}
.external[href^="http://hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: "";}external や ext_icon を使わず、 a[href^="https://www.amazon.co.jp"] ~ span::after{content:"";}でも行けそうですが、あとから見ても分かりやすいだろうということでクラスで指定しました。
href のうしろについている ^ は「前方一致＝文字列の最初から一致させる」条件です。
二つ目のhttpなしでのURL記述に用いた * は href の中のどこかにその文字列が含まれているものにマッチします。
要素というのは a のようなタグと、そこにある文字列です。; CSSセレクターはスタイルを適用する要素を指定するために用いられます。
スタイルだけでなくjavascriptなどでも利用されますね。
CSSの a 要素への属性セレクタで外部リンクアイコンをつけた場合の外し方
プラグインもテーマの機能も使わず外部リンクへのURLにリンクアイコンをつける方法として一般的なのは a::after を使った方法だと思います。
これを外すのはかんたん。
a[target="_blank"]::after{ font-family: FontAwesome; content: "\f08e";}こんな感じでブランクで外部リンクアイコンを振り分けているなら、この後ろに
a[href^=”https://www.amazon.co.jp”]::after{content: none;}こんなのを足していくだけです。
うしろにつけているアイコンを表示させている content の内容を空にしてやればいいわけです。