リンクの四角マークの出し方について



  • https://seo.krsw.biz/how-to-add-external-link-square-icon/
    上ののリンクに記載のとおり、外部リンク用の「リンクの四角マーク」
    を表示したいので、

    <i class="fa fa-external-link fa-fw"></i>

    をWordPressの編集モードをビジュアルからテキストに変更して以下のHTMLタグを記入しましたが、表示されません。

    JINでは何か表示に制限があるのでしょうか?クラシックエディターを使っています。
    お手数ですが、どなたかご意見いただけますと幸いです。


    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @uchigaLIFE さん

    こんにちは!

    Font Awesome はバージョンによってコードが違っていたりするのですが、
    以下のコードを使うとどうでしょうか??

    <i class="fas fa-external-link-alt"></i>
    

    お手数おかけしますが、ご確認よろしくお願いいたします!



  • リンクの四角マークの出し方についてで@tsu_が発言 :

    <i class="fas fa-external-link-alt"></i>

    お忙しい中、お時間いただきご回答ありがとうございます。
    つけたい文章の後に、半角スペースを入れたり、スペースなしでつけてみましたが、更新されたページには、
    残念ながら表示されませんでした。



  • @uchigaLIFE さん

    検証いただき、ありがとうございます!

    こちらの環境ですと、以下のような形で入力すると問題なく表示されるのですが、、、
    入力方法自体は同じ形になっていますか??
    (Classic Editor をお使いですよね...?)

    0_1652873721505_スクリーンショット 2022-05-18 20.33.28.jpg


    0_1652873733662_スクリーンショット 2022-05-18 20.33.34.jpg

    ご確認よろしくお願いいたします!



  • リンクの四角マークの出し方についてで@tsu_が発言 :

    Font Awesome はバージョンによってコードが違っていたりするのですが、
    以下のコードを使うとどうでしょうか??
    <i class="fas fa-external-link-alt"></i>

    0_1652912744654_JIN画像 2022-05-19 7.23.59.png

    ご連絡ありがとうございます。
    やはり表示されないですね。外部リンク(テキストリンク等)の後に表示させたいのですが、うまくいきません。クラシックエディター使用しています。
    うまく表示させたいのですが、難しいですね。



  • 追記失礼いたします。「追加css」にも何か入力が必要ですか?以前、この外部リンクのマークを出すために、コードを入力したのですが、必要があれば、もう一で入力いたしますが、いかがでしょうか。



  • @uchigaLIFE さん

    追加CSS には特に入力は必要ないですね。。。

    あ、「カスタマイズ」の「その他設定」にある
    「fontawesomeを読み込まない」にチェックが入っていると表示されないと思います。

    お手数おかけしますが、ご確認よろしくお願いいたします!



  • リンクの四角マークの出し方についてで@tsu_が発言 :

    「fontawesomeを読み込まない」にチェックが入っていると表示されないと思います。

    ご連絡ありがとうございます。表示されました。
    お時間いただきありがとうございました。

    ところで、JINでfontawesomeを使用すると、PageSpeed Insightで計測したサイト表示速度
    がかなり遅くなると聞いたことがありますが、SEOへの影響は大きいのでしょうか。



  • @uchigaLIFE さん

    ご連絡ありがとうございます。表示されました。
    お時間いただきありがとうございました。

    上手く行ったようで良かったです!

    ところで、JINでfontawesomeを使用すると、PageSpeed Insightで計測したサイト表示速度
    がかなり遅くなると聞いたことがありますが、SEOへの影響は大きいのでしょうか。

    SEOに関しましては色々な要素が絡みますので何とも言えませんが、
    気になるようでしたら、以下のマニュアルや記事が参考になるかもしれません!

    https://jin-theme.com/manual/speed-up/
    https://azusas.com/jin-original-icon-font/

    ご確認よろしくお願いいたします!



  • リンクの四角マークの出し方についてで@tsu_が発言 :

    SEOに関しましては色々な要素が絡みますので何とも言えませんが、
    気になるようでしたら、以下のマニュアルや記事が参考になるかもしれません!
    https://jin-theme.com/manual/speed-up/
    https://azusas.com/jin-original-icon-font/
    ご確認よろしくお願いいたします!

    お忙しい中、ありがとうございました。



  • @uchigaLIFE さん

    引き続き、よろしくお願いいたします。
    (ご確認いただければ、ご返信は無用ですので!)