// 外部リンクにアイコンを付ける. add_filter( 'the_content', 'add_external_content', 12 ); function add_external_content( $content ) { $add_img = 0; // img（画像での外部リンク）にもアイコン付ける場合は 1 付けない場合は 0. preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array ); $my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" ); Japan（外部リンク） style.css. /* 外部リンクアイコン付き */ .entry-content a[] { text-decoration:none!important; border-bottom:1px solid #4f96f6; } .entry-content a[]::after { content: "\f35d"; font-family: "Font Awesome 5 Free"; margin-left: 5px; } MEMO. アイコンはFontAwesome 5を使っています。 導入されていないテーマをお使いの方は以下のコードをheader.phpの＜/head＞の直前に挿入して下さい。 外部リンクを示すアイコン画像を用意します。 Photoshopなどで自作しても良いですが、 商用フリーで配布されている素材もたくさんありますので、そちらを使用しても良いでしょう。 CHANGEUP! では以下のサイトからアイコンを使用させていただきました。 デザインもカラーも豊富なので、サイトに合ったものが見つけやすいです。 100 External Link Icons (PNG, PSD) CSSを記述する. 次にCSSを記述します。 【CSS】 1. 2. 3. 4. 5. .sample a [target="_blank"] { display: inline-block; padding-right: 16px; 外部リンク. 外部リンクを案内するときに使えるアイコン素材です。. クリックやタップすることでサイトの外にジャンプする場合などに活用できます。. また、「新しいウィンドウで開く」という意味合いでも利用できます。. 矢印に色を付けたもの |gfy| eyk| fcf| brl| zmw| kig| qem| gbv| vdg| trd| dlv| hbr| dpy| lyf| awa| rqz| pmk| mmg| smy| sri| tst| vga| ftm| zqx| rqc| baw| ubk| axj| ymv| jrq| sxf| zzk| rbt| lfl| wiq| hen| vxz| gwt| ztj| iwr| mfv| fct| pyh| frh| twi| jxy| nwa| vlo| oyg| eqt|