HOME > ウェブデザイン > 【CSS】target="_blank" の付いたリンクに専用アイコンを付けたら予期しないところにまで表示されてしまった
公開日:2011.6.20
更新日:2019.6.10
この記事は約3分で読めます。

【CSS】target="_blank" の付いたリンクに専用アイコンを付けたら予期しないところにまで表示されてしまった

リンクをクリックすると新しいウインドウ(別タブ)で表示させるという意味の 「target="_blank"」

当ブログでは、この命令が付加されたリンクには「新しいウインドウ(別タブ)で開きますよ」という意味のリンクアイコンを付けていました。

ところが気付かないところで想定外の表示がなされていることがあって解決策をきゅうきょ調べたことがあります。

SIRIUSレビューイメージ画像

画像リンクには必要なし

target="_blank"がXHTML1.1では非推奨とかリンクをどう開くかは見る側の勝手だろうとかいう議論についてはこの際無視します。

単純に関連リンクサイトを見るときには元のページが開いてあった方が参照しやすいだろうという理由から「target="_blank"」を付けています。

そしてそのリンクには親切がましく(他のサイトでもよく見かけますけどね)専用のリンクアイコンを付けてありました。

このリンクアイコン(←コレ)、やり方はいろいろあるみたいですが、私は下記のように指定してます。

リンクアイコンは見よう見まねで自作したものですがweb上にはダウンロード可能なリンクアイコンセットなるものも結構あります。

これで終了と思っていたところ、よくよく見ると「target="_blank"」付加の画像リンクの後ろにもアイコンが見えてしまっているぢゃぁないですか。

画像リンクアイコン画像

当然といえば当然ですが、画像の場合は幅が変わるとレイアウトが崩れることもあるのでこの際消しちゃうことにします。

(それ以前にちょっとみっともないですし)

設定方法

調べてみると鉄板の書き方はないようで、多いのは画像リンクに専用のクラス名を付加すること。

そのクラスに、「表示するものは何もないよ」という意味なんでしょうか 「content: "";」を指定することだといいます。

クラスはa要素に指定するので、仮にclass="imglink"とした場合は

これで画像の後ろにリンクアイコンが出なくなります。

区切り画像

最近では是非モンと言われようのSNS関連リンクアイコンですが、いまいち効果や使い方がわからないまま当ブログにも入れてあります。

当初はfunction.phpに書き込んで表示させていました。

でもiPod/iPadで正常に表示されないのをきっかけに「WP Social Bookmarking Light」というプラグインに変更してみたんです。

ところが”はてなブックマーク”アイコンのおしりだけになぜか「 target="_blank"」用のリンクアイコンが出てしまってるぢゃぁないですか。

リンクアイコン画像

ソースを見てみると…ああ、やっぱり「target=_blank」が入っています。

きっとこれが原因なんでしょう。
でも対処方法がわからない。

幸い「WP Social Bookmarking Light」が吐き出すコードにはクラス(wp_social_bookmarking_light)が割り振ってあったので、先ほどの記述にクラス名をプラスしてみます。

これでリンクアイコンが消せました。

ということはリンクアイコンの操作は必要ならクラスを付けて制御させればよさそうってことですかね。

以上です。

追記 -2019.6.10-

現在は、外部リンクに専用アイコンを表示させたい時にはその都度専用のクラスを加筆することで、意図的に表示・非表示を操作してます。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)