余分な表示はCSSで消す：グローバルサイン編

• 2008年10月 6日 10:50
• CSS

Tweet

ジオトラストのサイトシールや、グローバルサインの旧サイトシールが、2009年の3月で表示されなくなるそうです。

• サイトシール変更のお知らせ

アイビーネットのサイトでは、特に必要性を感じなかったのでジオトラストのサイトシールのまま放置していました。

期限ギリギリまでそのままでも良かったのですが、変更を忘れて表示されなくなるのも困るので、覚えているうちに変更することにしました。

グローバルサインの新シールは背景色が白じゃないとかっこ悪い

新シールは上部文字の背景が透明に抜いてあります。しかし背景色が白系の場所に置くという前提で作られているようで、アイビーネットのサイトのように背景色が黒系の場合、上部文字の周りに白が残ってガタガタになり、とってもかっこ悪くなります。

サイトシール自体を編集できればいいのですが、データはグローバルサインのサーバーに置いてあるので変更することが出来ません。しかし、このままではかっこ悪くてアイビーネットのサイトには使えません。

余分な表示をCSSで消す

設置例：アイビーネット

サイトシール自体が変更できないということで、CSSで何とかすることにしました。

周りがガタガタになっていた「グローバルサイン認証サイト」という上部文字ですが、取ってしまってもたいした影響は無いだろうということで、いっそ消してやることにしました。

CSSで行うの処理は下記になります。

• 表示領域の高さを設定
• position設定で中身を自由配置に変更
• 表示したくない部分を表示領域の外に出す
• 表示領域からはみ出た部分を隠す

CSSソース

#globalsign {
	display: block;
	height: 46px;
	width: 115px;
	position: relative;
	overflow: hidden;
}

#globalsign object {
	top: -11px;
	position: absolute;
}

今回は115×57ピクセルのサイトシールを使うことにしましたので、表示したくない上部文字部分11pxを全体の高さから引き「57px − 11px ＝ 46px」を「height」の値としています。「object」はFlashの場合です。GIFの場合は「img」にしてください。

今回はグローバルサインのサイトシールを例にしましたが、この方法はいろいろな場面で応用できると思います。同じような問題でお悩みでしたら、一度試してみてはどうでしょうか。

余談　lintでエラーが出ないようにする

グローバルサインのディフォルトソースではURLが「<img src="//seal.globalsign.com/gs_noscript_115-57_ja.gif">」というように「http:」が省略されて記述されています。「http」でも「https」でも使えるようにということなんですが、lintでチェックするとエラーが出てしまいます。

もし、このエラーがいやでしたら「http」上では「<img src="http//seal...」とし、「https」上では「<img src="https//seal...」というように、セキュアエリアかどうかでソースを変えてやるとエラーが出なくなります。

Tweet