サイトアイコン あみだがみねのもろもろ備忘録

外部リンクアイコンを簡単に表示する (擬似的・テキトー)

外部リンクアイコン(下のようなやつ)を擬似的に簡単に表示する方法

キレイに表示するならFont awesomeなどを使えばいいんですが、それすらもめんどくさい!という人のために…

最近はUnicode絵文字が充実してきたので、外部リンクに使える絵文字があれば簡単に使えるじゃないかと探しましたが、見つかりませんでした。(なんでないんだろう?)

似たようなものでは、斜め右上を指す矢印が見つかりました。
こんなの

(HTML上でUnicode文字参照で表すには、”↗“とすれば良い)

それに角カッコを組み合わせれば…

なんとなく外部リンクっぽい!(ダメ?)

しかも超軽量です。ただしWebシステムとブラウザがUnicodeに対応、かつ、クライアントにUnicodeフォントが入っていないと動きません。


※2018/06/21追記
WordPress + Google Chrome、または、
font-familyを絵文字対応のもの(Windowsなら”Segoe UI Emoji”など)にすると、
“↗”は、ただの矢印ではなく、色付き四角形に囲まれた矢印になります。

その場合、角カッコは余計になるかも…


このページはAMPページです。
👉元のページ(非AMPページ)を表示する
👉あみだがみねのもろもろ備忘録 TOPへ
モバイルバージョンを終了