loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】target=”_blank” の付いたリンクに専用アイコンを付けたら予期しないところにまで表示されてしまった
この記事は約3分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2011.6.20

リンクをクリックすると新しいウインドウ(別タブ)で表示させるという意味の
「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)が割り振ってあったので、
先ほどの記述にクラス名をプラスしてみましょう。

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

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

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「Avalon (tcd040)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

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

先頭へ