tkd2017の勉強ブログ

日々の勉強をアウトプットするブログ

はてなブログ内の外部リンクにつけるアイコンを制御する

何度も更新しては記事にしていますが、前回はこんなことをしていました。

www.high-novice.com

これで外部リンクは別タブで開き、さらにアイコン付与ができたわけですが、プロフィール画面がこうなっていました。

f:id:tkd2017:20171223124310p:plain:w500

うーん、これはちょっとアレですね。

というわけで、外部リンクであっても画像の場合はアイコンを付与しないようにします。

構造の確認

ChromeのDevToolsを使って確認してみます。

f:id:tkd2017:20171223125134p:plain:w400

aタグの子要素としてimgタグがあります。つまりアイコンを付与するのは 外部リンクのaタグ かつ 子にimgタグをもたない ということになります。

これはCSSでは難しい(というかできない?)のですが、jQueryでは簡単に実現できます。

設定変更

設定は毎度お馴染み、詳細設定の headに要素を追加 です。今回修正されたコードは次のようになりました。

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
    $('a[href^="http"]:not([href*="' + location.hostname + '"])').attr('target', '_blank').attr('rel', 'noopener noreferrer')
      .not(':has(img)').append('<i class="fas fa-external-link-alt" style="margin-left: 3px"></i>');
})
</script>

$el.not(':has(img)')によって、$elのうち、子要素にimgタグをもたない要素のみを対象に操作をすることができます。

結果は次のようになりました。

f:id:tkd2017:20171223124403p:plain:w500

まとめ

最近のフロント開発ではAngularやReactにおされjQueryの出番は減ってきていますが、こういうちょっとした操作にはとても便利ですね。