まほ〜のあいらんどけんきゅ〜

デフォルトのリンクを消す

1.CSSで消す

TOPや次画面で右上に表示される”[ケータイMode表示]”の消し方について考えてみます。 これらを消すためにJavaScriptの外部ファイルを使う方法が用いられることが多いですが、 scriptをオフにして閲覧している人には当然見えてしまいます。 できれば、CSSで消したいところです。 これらのリンクは<div align="right">で右寄せされています。 しかしながら、

<style><!--div{display:none}--></style>

で消すと、広告表示も消えてしまいますので、

<style><!--div font b{display:none}--></style>

とします。 もうひとつの方法としてはソースの最初に

<div style="position:absolute;top:10;background:背景と同じ色の指定">

を記述してポジションを上にずらすという手もあります。

2.JavaScriptで消す

JavaScriptを使う場合、リンク部分を書き換える外部ファイルを使って消すこともできますが、 わざわざインクリメント演算子とfor文を使うのもなんだか無駄なような気もします。 ”[ケータイMode表示]”だけを消すのなら、もっと簡単にできないのでしょうか? 実は外部ファイルにしなくても済むような短いスクリプトで消すことができます。 ”[ケータイMode表示]”が一番初めに出てくるリンクなので、それを利用するわけです。 使えるプロパティがいくつかあるので、消し方は何通りかあります。

ex1.<script>document.links[0].innerHTML="";</script>
ex2.<script>document.links[0].innerText="";</script>
ex3.<script>document.links[0].style.visibility="hidden";</script>
ex4.<script>document.links[0].style.display="none";</script>

これらのうちのどれかを編集画面の一番最初に書けばOKです。 ex.1と2はIE4以上のみ。ex.3と4はIE4以上とNN6以上で消せます。 ちなみにex4.で消すと、その分の行が詰まって表示されます。

では、次画面の”[0] 戻る”の方はどうでしょう? これは、一番最後に出てくるリンクなので、bodyタグの中身を読み込んでからでないと、オブジェクト化されません。 ですが、bodyタグの重複を気にしなければ、 bodyタグにonloadのイベントハンドラを付けて実行させることができます。 innerHTMLinnerTextも使えますが、NN対応のものだけ示します。

ex1.<body onLoad=document.links[document.links.length-1].style.visibility="hidden">
ex2.<body onLoad=document.links[document.links.length-1].style.display="none">

以下同じことなので省略します。 両方一遍に消すときは、

<body onLoad=document.links[0].style.visibility="hidden";document.links[document.links.length-1].style.visibility="hidden">

などとすればOKです。 ちなみにbodyタグの重複についてですが、現行のPCのブラウザでは別の属性を指定しておけば、 それぞれのbodyタグを読み込んでその通り表示してくれるようです。

3.おまけ

(1)画像で消す

壁紙の種類によっては、まったく無理なやり方ですが、壁紙が左下固定とかで右上にかかっていないときとか壁紙を貼っていない場合に有効なやり方です。 要は背景と同じ色の画像をペイントなどで作成して、右上の”[ケータイMode表示]”など消したいところの上に絶対位置指定で貼ってしまおうというものです。 具体的には

<div style="position:absolute;top:0;right:0"><img src="画像のURL"></div>

で貼ります。(右上の”[ケータイMode表示]”を消す場合)

(2)要素を絶対位置で貼る

よく考えると、要素に同じ色の背景色を指定して絶対位置に貼れば、同じことですね。

<div style="position:absolute;top:0;right:0;background-color:★;width:100;height:40"></div>
★のところに背景と同じ色を指定すれば、右上の”[ケータイMode表示]”が消せます。
大きさは閲覧者の環境によって違うので、やや大きめに指定するべきでしょう。

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送