MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

「CSS」新しいタブで開くリンクをFontAwesomeのアイコンで表現する方法

最近よく思うのが、他のサイトで何とかの登録方法!!って解説してるサイトよく見るんだけどさ、、、リンク先クリックしたら別タブじゃなかった時って戻らないとイケないのでウザイんですよね~。

だけど、有料テーマとかは結構その辺は親切でアイコンが付いてたりします。

最近よく見かけますよね??

あ、これクリックしたら、別タブで開くんだな~って分かるアイコン。

こういうヤツね。

コレってすっげー親切だと思うんです。

このアイコンがあるだけで新しいタブで開くんだ!ってのが俺(サル)でも何となく分かる。


けんじ

ならばワシもやろう!!


ぴよぴよ

そんなんええから、、はよ紹介したって~。

ってなわけで、コピペで簡単に出来るので皆の衆もレッツトライしてみて下さい。

テーマをカスタマイズ

FontAwesomeの読み込み

まず、FontAwesomeの呼び出しです。

functionに追記
//レンダリングブロックが気になるのでフッターで読み込む
function add_footer_styles() {
    wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
};
add_action( 'wp_footer', 'add_footer_styles' );

スタイルの追記

CSSは、別タブで開く属性「target=”_blank”」が付いたときにCSSの疑似要素を適用するように書きます

style.cssに追記
.entry-content p a[target="_blank"]::after {
font-family: 'FontAwesome';
content: '\f08e';
font-size: 90%;
margin: 0 3px;
}
※僕のテーマの場合は投稿のコンテンツ部分が.entry-contentですが、これはテーマに合わせてくださいね。
で、コードを追加したら、、
こうなってるはず。

注意点

ただ、ちょっと注意する事がありますね。

画像にもリンク先が別タブだったらこんなんが付いちゃう時があります。

こんな感じで。

これはど素人丸出しで、ちょっと恥ずかしいな( ^ω^)・・・

で、こうなった場合はpタグで囲まれてるので、aタグにクラスを追加してスタイルで消しちゃう。

functions.phpに追記
add_action( 'wp_print_footer_scripts', 'my_addclass_noicon' );
function my_addclass_noicon() {
?><script>
jQuery( function ( $ ) {
$("img").parent('a').addClass('no-icon');
} );
</script><?php
}
style.cssに追記
a.no-icon::after {
display: none;
}
するとどうでしょう??

ベリグーやん!!☆⌒d(´∀`)ノ

とりあえず投稿コンテンツのリンク部分に適用したいのですが、コンテンツ部分はテーマによりけりなので、これだけは申し訳ないですが自分で調べて下さい。

分からない場合はコメント頂けたらと思います。

それでは、ごきげんよう!

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください