HTMLでリンクを隠す方法

ページ名:HTMLでリンクを隠す方法

HTMLでリンクを隠すと、あなたのウェブページを閲覧している平均的なユーザーには実質的に使用できなくなります。しかし、もしあなたが楽しい借り物競走をしたい、またはあなたのサイトにいくつかの隠された機能、時にはイースターエッグと呼ばれる、を追加したい場合は、リンクを隠すことはちょうどそれを達成するのに役立ちます!ただし、これらの変更を実行するには、HTMLとコード記述の機能的な知識が必要です。

方法1

リンクのフォントカラーを変更する

  1. ウェブページのコードを開き、リンクを探します。あなたのウェブページのために書いたコードに入り、あなたがコードに書いたリンクを見つけ、あなたの背景と一致するようにそのすべての色の値を変更することができます。こうすることで、効果的に背景色からリンクを見えなくすることができます。
  2. 適切な16進カラーコードを調べてください。HTML、CSS、その他のコーディング言語では、6桁、3バイトの16進数コードで色を表します。あなたの背景に合った色の16進コードを見つける必要がありますが、一般的な16進コードは以下の通りです:
    • 白:FFFFFF
    • 黒:000000
    • グレー:808080
    • ライトグレー:D3D3D3
    • 青: 0000FF
    • ベージュ:F5F5DC
  3. コードを調整するウェブページのコードで隠したいリンクを見つけ、16進数のカラーコードがわかったら、リンクの色を変更することができます。そのためには、以下のコードを使用し、隠したいリンクとあなたの16進カラーコードを適切な場所に挿入します:
    • <style>
      a:link.com {
      色:#ここに16進カラーコードを挿入);
      }
      a:active {
      color:#ここに16進カラーコードを挿入);
      }
      a:visitedの場合
      color:#ここに16進カラーコードを挿入);
      }
      a:hover {
      color:#ここに16進カラーコードを挿入);
      }
      </style>
  4. find "機能を使って、あなたのコードが機能したことを確認してください。あなたのリンクは事実上隠されましたが、あなたや他のユーザーはブラウザの「find」機能を使ってリンクを見つけることができます。リンクが通常の状態であれ、訪問された状態であれ、アクティブな状態であれ、カーソルが置かれている状態であれ、リンクは見えなくなるはずです。
    • ほとんどのブラウザでは、Ctrl+Fキーを押すことで「検索」機能を有効にすることができます。
方法2

クラスベースのCSSを使う

  1. リンクにクラスまたはID属性を追加します。これは、リンクタグに追加情報を含めることで可能です。リンクタグを見つけ、IDかclassのどちらかに適切なコードを記述します。コードは次のようになります:
    • class=Link.com
    • id=Link.com
  2. クラスまたはIDのCSSルールを作成します。クラスの場合は"."、IDの場合は "#"記号を使って、作成した名前を参照できます。コードは次のようになります:
    • クラス: .Link.com
    • ID:#Link.com
  3. display "または "visibility "を変更します。これらの機能はどちらもリンクを隠す効果がありますが、それぞれの機能によってリンクを隠す方法が異なります。display "機能を "none "に変更すると、ページレイアウトからリンクが削除されます。 これにより、ページの他の要素があなたのリンクを参照して位置を定義している場合、その要素が移動する可能性があります。visibilityを "hidden "に変更すると、ページレイアウトに影響を与えることなくリンクを隠すことができます。 この段階でのコードは、単純に次のようになります:
    • display: none
    • visibility: hidden
  4. コードの正しさを再確認してください。誤ったコードは、ウェブページに重大なエラーを引き起こしたり、デザインの重要な要素を変更したりする可能性があります。最終的なHTMLとCSSのコードは次のようになります:
    • HTMLコード
      <a href=Link.com
      class=Link.com>リンク</a>。
    • CSSコード
      .Link.com{の
      display: none;
      }
この記事は、CC BY-NC-SAで公開されている「 HTMLでリンクを隠す方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン: このページをSNSに投稿するのに便利です。

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する

NG表示方式

NGID一覧