Opera でも長いサブタイトルを最後まで表示できるようにする

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] IE ではちゃんと見えるのに、Opera だと期待に反する見え方をする場合の対処法。
[キーワード] stylesheet CSS

« 女子高生リカちゃん | トップページ | はろうきてぃなごやん »

2004.03.03

Opera でも長いサブタイトルを最後まで表示できるようにする

サブタイトルには、あまり長い文字を入れない方がいいのですが、ココログの場合は、 テンプレートを自由にいじれないので、必ず読んで欲しいメッセージを目立つところに入れようとすると、 サブタイトルに入れたくなる気持ちもわかります。

ウチのブログは、HTMLとかソースを基本的にいじれないココログである関係上、サブタイトル欄を便宜上告知欄として使用しており、結構長い告知をしているのですが、その告知欄として使用しているサブタイトル欄が途中までしか表示されない、という感じで。

bublog: Operaだと、ココログがちゃんと表示されない!

実際に、Opera で見てみました。
Opera で閲覧してみる

これはスタイルシートで解決できますね。IE はこのままでいいので、IE には適用されず、Mozilla系 や Opera には適用される方法を使います。

どうやるのかというと。スタイルシートに、以下の内容を追加すれば解決します。

#container > #banner {
  height: 150px;
}

div#banner > h1 {
  font-size: 1.5em;
}
div#banner > h2 {
  padding-top: 10px;
  font-size: 0.8em;
  line-height: 100%;
  height: 40px;
  padding-bottom: 20px;
}

「>」を使うのがポイント。「>」を入れると IE では無視されます。Opera にはちゃんと適用されて、 以下のような見え方になります。
Opera で閲覧してみる
(スクリーンショットを貼るのがまずかったら言ってきて下さい > bubunさん)

IE ではちゃんと見えるのに Opera で見ると変だ、という場合、この方法が応用できます。

投稿者: tsupo 2004.03.03 午後 06:56 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

プログラミング」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/257943

この記事へのトラックバック一覧です: Opera でも長いサブタイトルを最後まで表示できるようにする:

» Operaでもbublogが見れるようになりした。サンクス!観測気球さん! from bublog
 Operaで、bublogがちゃんと表示されない、という記事を今日書きましたが、なんと、有名な、観測気球さんから、解決法を教えてもらって、ちゃんと表示されるよ... 続きを読む

受信: 2004.03.03 午後 10:47

» 観測気球: Opera でも長いサブタイトルを最後まで表示できるようにする from 此処録ANNEX:ココログTIPS
観測気球: Opera でも長いサブタイトルを最後まで表示できるようにする 続きを読む

受信: 2004.04.05 午前 01:12

コメント


こんにちは.Cosです.

CosもOperaが好きで使っているのですが,ココログでも使い勝手の悪さと表示の悪さにはがっかりしています.

でも・・・Operaを使っている人は自分のblogはおかしくならないようにしているんだろうなぁ・・・

Cosのところもいれてもう少しタイトル部分を変えてみようかなぁ・・・

投稿者: Cos (2004.03.03 午後 08:32)

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場