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

Total 509 views
この記事の所要時間は約 3分です。

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

当ブログでは、この命令が付加されたリンクには「新しいウインドウ(別タブ)で開きますよ」という意味のリンクアイコンを付けてあったんですが、
気付かないところで想定外の表示がなされていることがあって解決策をきゅうきょ調べたことがあります。

スポンサーリンク


 

イメージ画像

 

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)が割り振ってあったので、
先ほどの記述にクラス名をプラスしてみましょう。

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

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

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




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