ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

隠しリンクの作り方と見つけ方!SEOなど注意点も(4ページ目)

隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

JavaScriptを使ってページ移動機能を作ることで、リンクではない文字や画像をリンクのように動作させる方法

最後に、JavaScriptを使って隠しリンクを作る方法をご紹介いたします。HTMLの機能を使って作るリンクではないため、前ページでご紹介したリンクの一覧作成アドオンなどを使ってもリストアップされません。HTMLソースでhref属性の存在などを探しても見つけられないので、そこそこ見つけにくい隠しリンクになるでしょう。

JavaScriptを使って、リンクではない文字をリンクのように動作させる表示例
ここにJavaScriptで作った隠しリンクがあります。
上記の「隠しリンク」の文字をクリックすると隠しページへ移動できます。HTMLのリンク関連要素は使っていないので、文字の配色は通常の文字と同じですし、マウスポインタを載せてもポインタの形状は変化しませんし、ステータスバー等にもリンク先URLは表示されません。

この隠しリンクの作り方(A)
まず、HTMLソースを以下のように記述しておきます。
ここにJavaScriptで作った
<span onclick="ShowSecretPage();">隠しリンク</span>
があります。
ここでは、span要素内に含めた文字がリンクになります。画像を隠しリンクにしたい場合は「隠しリンク」という文字の代わりに画像(img要素)を書いて下さい。span要素にはonclick属性を加えて、ShowSecretPageという関数を実行しています。この関数の中身は、以下のようにJavaScriptで記述します。
<script type="text/javascript">
function ShowSecretPage() {
   window.location.href = 'hidepage.html';
}
</script>
ここでは、「hidepage.html」がリンク先URL(隠しページ)です。

上記のソースでは、JavaScriptでShowSecretPage関数を作って、hrefプロパティにURLを代入しています(ここでは「hidepage.html」というファイル名しか書いていませんが「http://」などから始まるURLを書いても構いません)。この関数が実行されると、ここで記述したURLに移動します。

※関数名は自由に変更して下さい。関数名が「ShowSecretPage」だと、ソースを見られた際に分かりやすすぎるかもしれません。関数名を変更した際は、HTML側のonclick属性値に記述する関数名も併せて変更するのを忘れないようご注意下さい。

上記のJavaScriptソースはHTMLソース内に記述しても構いませんが、それだとHTMLソースを見るだけでリンク先がどこなのか分かりやすくなってしまいます。より探しにくくするには、独立したJavaScriptファイルに記述しておいて、そのJavaScriptファイルをHTMLから読み込む方が良いでしょう。その方法は下記の通りです。

この隠しリンクの作り方(B)
まず、以下の3行を例えば「sample.js」というファイル名で保存します。
function ShowSecretPage() {
   window.location.href = 'hidepage.html';
}
次に、HTMLソースのどこかに、以下の1行を追加します。
<script type="text/javascript" src="sample.js"></script>
これで、HTMLから sample.js ファイルに書かれたJavaScriptソースが読み込めます(HTMLファイルとJavaScriptファイルが同じ場所にアップロードされている場合)。あとは、作り方(A)と同様に隠しリンクを作ります。
ここにJavaScriptで作った
<span onclick="ShowSecretPage();">隠しリンク</span>
があります。
このようにしておけば、HTMLソースを読んだだけでは隠しリンクのリンク先は分かりません。
 

この隠しリンクの見つけ方・攻略法

HTMLのa要素やarea要素などのリンク関連要素は使っていないため、前ページでご紹介したリンク一覧生成アドオンなどでは見つけられません。

ただ、ソース(HTMLだけでなくJavaScriptも含む)のどこかにリンク先URLを表す文字列が記述されていることは間違いないので、「http」や「.html」などのリンク先URLに含まれていそうな文字列で検索してみると見つけられるかもしれません。ただし、URLは必ずしも「http」で始まったり「.html」で終わったりしているわけではありませんから、これで絶対に見つけられるわけではありません。

もし、JavaScriptで作られている可能性を考えるなら、「location.href」などのキーワードでソース内を検索すると見つけやすいでしょう。
 

隠しリンクの作り方と見つけ方

今回は、ちょっとした遊びとして隠しリンクを作る方法と、その見つけ方を4種類ご紹介いたしました。なお、リンク自体は隠さないもののパスワードを入力しないと閲覧できなくする方法など、下記の関連記事もぜひご参照下さい。

【関連記事】
【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます