外部サイトへのリンクを明示するアイコン記号を画像には挿入しない方法

別タブで開くハイパーリンクに画像を設定した場合に、アイコン記号を自動挿入しないようにする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 別タブで開くハイパーリンクに画像を設定した場合に、CSSで自動挿入されるアイコン記号(⇗)を表示しないようにします。

  2. 画像ごとに設定したり、一定範囲内の画像にまとめて設定できます。

メリット

  1. アイコン記号(⇗)自動挿入をコントロールできます。

  2. ハイパーリンク付き画像を並べる際に、アイコン記号(⇗)が自動挿入されるのを防げます。

自動挿入をコントロールする具体例

  1. 画像にハイパーリンクを設定しても、文字の場合と同様に次のようになります。アイコン記号(⇗)が自動挿入されないようにした方がよさそうです。

    サンプルコード

    <div>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-1.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-1s.jpg" width="100" height="100" alt="しましまネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-2.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-2s.jpg" width="100" height="100" alt="幸薄そうなネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-3.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-3s.jpg" width="100" height="100" alt="まったりネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-0.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-0s.jpg" width="100" height="100" alt="未分類 | 愛猫チェリッシュ" /></a>
    </div>
    しましまネコ | 愛猫チェリッシュ 幸薄そうなネコ | 愛猫チェリッシュ まったりネコ | 愛猫チェリッシュ 未分類 | 愛猫チェリッシュ
  2. img のある a タグごとに no-target-blank をクラスに追加します。下の4つの画像の内、左の2つにクラスを追加しました。img タグごとではなくa タグごとにクラスを追加する必要があります。

    サンプルコード

    <div>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-1.html" target="_blank" class="no-target-blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-1s.jpg" width="100" height="100" alt="しましまネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-2.html" target="_blank" class="no-target-blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-2s.jpg" width="100" height="100" alt="幸薄そうなネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-3.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-3s.jpg" width="100" height="100" alt="まったりネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-0.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-0s.jpg" width="100" height="100" alt="未分類 | 愛猫チェリッシュ" /></a>
    </div>
    しましまネコ | 愛猫チェリッシュ 幸薄そうなネコ | 愛猫チェリッシュ まったりネコ | 愛猫チェリッシュ 未分類 | 愛猫チェリッシュ
  3. まとめて非表示にするには、 a タグの親要素のクラスに no-target-blank を追加します。a タグごとに追加する必要はありません。

    サンプルコード

    <div class="no-target-blank">
    <a href="http://eyecatcher.blog.fc2.com/blog-category-1.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-1s.jpg" width="100" height="100" alt="しましまネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-2.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-2s.jpg" width="100" height="100" alt="幸薄そうなネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-3.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-3s.jpg" width="100" height="100" alt="まったりネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-0.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-0s.jpg" width="100" height="100" alt="未分類 | 愛猫チェリッシュ" /></a>
    </div>
    しましまネコ | 愛猫チェリッシュ 幸薄そうなネコ | 愛猫チェリッシュ まったりネコ | 愛猫チェリッシュ 未分類 | 愛猫チェリッシュ
  4. 枠線を非表示にする場合は、クラス no-outline を追加します。

    サンプルコード

    <div class="no-target-blank no-outline">
    <a href="http://eyecatcher.blog.fc2.com/blog-category-1.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-1s.jpg" width="100" height="100" alt="しましまネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-2.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-2s.jpg" width="100" height="100" alt="幸薄そうなネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-3.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-3s.jpg" width="100" height="100" alt="まったりネコ | 愛猫チェリッシュ" /></a>
    <a href="http://eyecatcher.blog.fc2.com/blog-category-0.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-0s.jpg" width="100" height="100" alt="未分類 | 愛猫チェリッシュ" /></a>
    </div>
    しましまネコ | 愛猫チェリッシュ 幸薄そうなネコ | 愛猫チェリッシュ まったりネコ | 愛猫チェリッシュ 未分類 | 愛猫チェリッシュ
  5. 画像と画像の間の隙間を取り除くには、a タグごとの改行をなくします。

    サンプルコード

    <div class="no-target-blank no-outline"><a href="http://eyecatcher.blog.fc2.com/blog-category-1.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-1s.jpg" width="100" height="100" alt="しましまネコ | 愛猫チェリッシュ" /></a><a href="http://eyecatcher.blog.fc2.com/blog-category-2.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-2s.jpg" width="100" height="100" alt="幸薄そうなネコ | 愛猫チェリッシュ" /></a><a href="http://eyecatcher.blog.fc2.com/blog-category-3.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-3s.jpg" width="100" height="100" alt="まったりネコ | 愛猫チェリッシュ" /></a><a href="http://eyecatcher.blog.fc2.com/blog-category-0.html" target="_blank"><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/category-0s.jpg" width="100" height="100" alt="未分類 | 愛猫チェリッシュ" /></a></div>
    しましまネコ | 愛猫チェリッシュ幸薄そうなネコ | 愛猫チェリッシュまったりネコ | 愛猫チェリッシュ未分類 | 愛猫チェリッシュ

今後のテンプレート改訂時には

  1. 上記説明に相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)