(HTML,CSS,JavaScript)隠しリンクの作り方と見つけ方!SEOなど注意点も隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。文宏ホームページ作成ガイド隠しリンクとは隠しリンクとは、閲覧者には容易に見えない形で掲載されたリンクのことです。リンクの存在を視覚的には完全に見えなくする方法や、極端に見えにくくする方法、ある条件を満たさない限り表示されないようにする方法など、様々な隠し方があります。宝探しゲームなどの遊び要素として使う分には問題ありませんが、検索結果のランキング操作目的で使おうとするとペナルティを受ける可能性があり、使い方には注意が必要です(後述)。見つけられることを前提にした隠しリンクを作ってみましょう隠しリンク(隠しページ)の作り方と見つけ方を紹介ウェブ上のリンクは、閲覧者に別のページへ移動してもらう目的で作るのですから、隠す意味はありません。おまけページなどへのリンクを見えにくくしてこっそり隠すのは、ちょっとした遊びとして面白い場合もあるでしょう。そこで今回は、隠しリンク(隠しページ)の作り方をご紹介いたします。その隠しリンクが「どれくらい発見しにくいのか」を判断するために、隠しリンクの見つけ方(探し方)も併せて解説しています。隠しリンクと言っても、本当に誰にも見つけられなかったら用意する意味がありません。それぞれの隠しリンクの見つけ方も参考にして、どの方法を使って隠すのかを選んでみて下さい。具体的な解説の前に注意点を2つほど述べておきます。本記事でご紹介する隠しリンクの作り方は、最終的には閲覧者に見つけてもらうことを前提にした隠し方です。不特定多数に公開すると困るような情報は、ユーザ認証などのアクセス制限方法を使いましょう。詳しくは記事「Basic認証(基本認証)でアクセス制限をかける方法」で解説しています。そこまで強固なアクセス制限は必要ないものの、隠しページの存在を軽く隠しておきたいだけの場合には、JavaScriptを使う手軽な方法もあります。簡単な閲覧制限」で解説していますのでご参照下さい。これは、リンクを隠す(見えにくくする)のではなく、ページを隠す(アクセスしにくくする)方法です。人間の閲覧者には見えにくい配色や大きさで掲載した文字のことを「隠しテキスト」と呼びます。この隠しテキストや隠しリンクは、SEO(検索エンジン最適化)目的の偽装手段として使うと、Googleのウェブマスター向けガイドライン(品質に関するガイドライン)に違反します(特に隠しテキストと隠しリンクページで解説されています)。ページ中の隠しリンクがSEO目的の偽装行為だと判定されてしまうと、そのページやリンク先のページが検索結果から除外されるなどのペナルティを受けることになってしまいます。検索サイトからもアクセス者を得たいページでは特に、これらの方法を多用しないよう注意して下さい。使わないでおくのが最も無難です。隠しリンクを作る最も簡単な方法が、配色を調整して見えなくする方法でしょう。文字色を背景色と同じ色にして掲載すれば、ブラウザ上の見た目ではリンクの存在が分かりません。作るのも簡単ですが、見つけるのも簡単です。上記の不自然に空いたスペースにリンクがあります。文字は見えなくても、マウスポインタを載せるとポインタの形状が変化するのでリンクだと分かるでしょう。■A:この隠しリンクの作り方:方法はとても簡単で、リンク文字の入りを背景色と同じにすれば良いだけです。背景色が灰色(#dddddd)の場合は、HTMLとCSSを以下のように記述します。none;">隠しリンク</a>があります。上記のHTMLでは、a要素を使って「hidelink.html」へのリンクを設けています。その際、style属性を使ってCSS(スタイルシート)で下記の2点の装飾を施しています。#dddddd;この記述で、リンク文字の配色を背景色と同じ灰色(#dddddd)に変えています。white;」と書きます。none;代表的なブラウザでは、リンク文字には標準で下線が引かれます。ここではその下線を表示しないように指定しています。上記の不自然に空いたスペースにリンクがあります。マウスポインタを載せたときにだけリンク文字が見えます。先程よりも見つけやすいでしょう。■B:この隠しリンクの作り方:方法は先程とほぼ同じです。リンクの上にマウスポインタが載った際の装飾も加えるため、HTMLとCSSを別々に記述します。HTMLは以下のように記述しておきます。class="hidelink">隠しリンク</a>があります。上記では、リンクを作るa要素に「hidelink」というclass名を付加しています。次にCSSソースを以下のように記述します。*/}</style>「リンクの配色」部分は先程と同じです。「リンクにマウスが載った際の配色」は上記ソースの後半のようにhover疑似クラスという記述方法を使うことで指定できます。ここでは、リンク文字に下線を加え、色を青色に変化させています。Aboutのウェブサイト以外で読んでいる場合(RSSリーダーや提携サイトなど)や、装飾の一部を無効にするようなブラウザの機能(リーダーモードなど)を使って読んでいる場合は、記事中のサンプルが意図通りには見えない可能性があります。上記でご紹介した「文字色を背景色を同じ色にする方法での隠しリンク」は、作るのも簡単な分、見つけるのも簡単です。見つけ方はいろいろありますが、例えば以下の方法が使えるでしょう。ページ全体を範囲選択してみるマウスをドラッグするなどして範囲選択すると、多くのブラウザでは選択領域が反転表示されます。すると、隠されているリンク文字も見えます。[Ctrl]+[A]キーを押すと簡単にページ全体を範囲選択できます。TABキーを連続で押していく多くのブラウザでは、[TAB]キーを押す度にリンクや入力欄などを順番に移動できます。ブラウザによっては、そのとき選択状態になっているリンクを点線などで囲んで表示するため、文字色が背景色と同じでも見つけられます。CSSを無効にしてみる装飾の変更にはCSSを使っていますから、ブラウザの機能でCSSを無効にすれば隠されているリンク文字も見えます。ページのHTMLソースを表示するこの隠しリンクは単に配色を変更しただけであって、リンクそのものはHTMLのa要素(=aタグ)を使って作られています。href="~"......」という記述を探せば、すべてのリンクを探せます。リンク一覧を表示する後述のアドオンなどを使って、ページ内のリンクを一覧表示させれば、もっと簡単に見つかります。次に、文字は隠さないが、リンクのようには見えなくする隠しリンクをご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。