BLOG

リンクの四角マークの出し方

リンクの四角マークの出し方
少年
外部リンクでよく見かける四角いマークってどうやって出しているのか。

四角いアイコンは画像なのか文字なのか。

外部リンクの四角マーク ←コレ

今回はこの四角いマークの出し方を紹介。

外部リンクに添えられていると見栄えが良いので、ブログ初心者必見。

リンクの四角マークの正体

リンクの四角マークは何なのか。

正体は以前も紹介した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>タグの中にテキストリンクを置換するスクリプトを追加すれば、自動で四角マークを付与することもできる。

 

関連する内容で、「メニューにアイコンを付ける方法」を以下の記事に書いたので、メニューをキレイに表示したい方の参考になると思う。

 

 

 

にほんブログ村 IT技術ブログ SEO・SEMへ
  • この記事を書いた人

KRSW

ITエンジニア兼ブロガー。 SEOは有名ブロガーやインフルエンサーの発信内容を読み、理解した内容を自分なりの解釈で書いています。 Twitterでも活動中。 よかったらフォローお願いします。 (,,゚Д゚)ノ

-BLOG
-

Translate »

Copyright© SEO初心者の学び舎 , 2020 All Rights Reserved.