[CSS]記事の下部に隠し文章を作る方法

記事の下部に背景と同じ色の文字を使えば隠し文字ができますが、それだけだと昔からありがちの方法で面白くないので、少し手を加えてみます。

文字と背景が同じ色だと、反転をすれば、文字が読めるというものを逆手にとり、以下のようにしてみます。

このように、隠し文章全体は背景と同じ色を使ってますが、一部だけ#ccccccで表示し、「はんてん」と読めるようにしています。

これのソースは以下のようになってます。

— HTML —


<div class="hanten">
<span>は</span>はは。この文章を見つけましたね。こ
<span>ん</span>なことなら、もっとしっかり隠せばよかったですよ。
<span>て</span>んで、隠れていないってことですか。た
<span>ん</span>ばさんに怒られますね
</div>


— スタイルシート —


.hanten{
color:white;
}
.hanten span{
color:#cccccc;
}


.hantenは背景と同じ色を指定します。

なお、隠し文章はSEOのペナルティを受けることがありますので（キーワードの羅列はペナルティ対象）、ほどほどにしてください。

[tmkm-amazon]4839929734[/tmkm-amazon]