四角いアイコンは画像なのか文字なのか。
←コレ
今回はこの四角いマークの出し方を紹介。
外部リンクに添えられていると見栄えが良いので、ブログ初心者必見。
リンクの四角マークの正体
リンクの四角マークは何なのか。
正体は以前も紹介したFont Awesome。
公開されているアイコン集であり、CSSで指定したclassを使うことで表示できる。
使い方としては、WordPressの編集モードをビジュアルからテキストに変更して以下のHTMLタグを記入する。
html
<i class="fa fa-external-link fa-fw"></i>
実行結果
自動で表示するには
HTMLタグをいちいち記入するのは面倒だ。
面倒なので
「どうにかしてリンクに自動で四角マークを付与する方法はないか」
と考えるだろう。
実は自動でマークを付加する方法がある。
jQueryでHTMLのリンクを検知して四角マークのHTMLを追加してしまうのだ。
具体的には以下のスクリプトをHTMLのヘッダー要素に追加する。
<script>
jQuery(function(){
jQuery('.entry-content p a[href*="//"]').not('[href*="'+location.hostname+'"]').each(function(){
if(jQuery(this).text() !== ""){
jQuery(this).prepend('<i style="vertical-align:middle;" class="fa fa-external-link fa-fw" aria-hidden="true"></i>');
}
})
});
</script>
追加する方法としてはWordPressなら、以下の操作で「header.php」を開いて <head>タグの中にスクリプトを追加する。
［外観］ -> ［テーマの編集］ -> ［header.php］
AFFINGER5の場合は、「コードの出力」の設定欄にスクリプトを追加すればよい。
［AFFINGER5 管理］ -> ［その他］ -> ［コードの出力］
するとテキストリンクに以下の四角マークが追加されたはずだ。
まとめ
テキストリンクと一緒によく見かける四角マークの正体はFont Awesome。
html
<i class="fa fa-external-link fa-fw"></i>
<head>タグの中にテキストリンクを置換するスクリプトを追加すれば、自動で四角マークを付与することもできる。
関連する内容で、「メニューにアイコンを付ける方法」を以下の記事に書いたので、メニューをキレイに表示したい方の参考になると思う。
あわせて読みたい
