はてなブログ グループ ブログタイトルが折り返されない不具合
前の記事に書いた「はてなブログ グループ スクロールの不具合」は不具合の可能性が高いが、今回の記事は意図的な可能性がある。
だが一応報告のために記事を書く。
- 作者: 近藤淳也
- 出版社/メーカー: 翔泳社
- 発売日: 2006/02/13
- メディア: 単行本
- 購入: 62人 クリック: 1,985回
- この商品を含むブログ (1100件) を見る
不具合画像
この画像の通り、ブログタイトルがサイドメニューにも重なって表示されてしまう。
この画像では、コンテンツのブログタイトルとサイドメニューの参加ブログ一覧のタイトルとが重なってしまい非常に読みづらくなってしまっているが、ブログタイトルが枠を超えて表示されているのがわかるかと思う。
再現方法
ブログタイトルの長いブログを作成し、任意のグループに参加する。そして、グループ個別ページより作成したブログを一覧に表示させる。
この結果、ブログタイトルが折り返されずに表示される。これが意図的な表示だとすれば、サイドメニューに文字が重なるのは文字が読みづらく、また、タイトルの下にあるリンクが選択しづらくなる。そのため、要望として折り返して表示させるか、本文のように三点リーダを使い省略して表示されることを望む。
原因
ブログタイトルは以下のようにHTMLで記述されている。
<a href="http://aossra2.hatenablog.com/" class="blog-name">異識の(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)(・∀・)日常(しつこww)</a>
そして、そのHTMLの".blog-name"には、circle.cssから以下のようなスタイルが適用されている。
#main .blogs .blog-meta .blog-name { font-weight: bold; font-size: 14px; height: 20px; white-space: nowrap; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: inline-block; }
CSS内で意図的に「white-space: nowrap;」とされているので意図的な可能性が高いが、このプロパティの値を「normal」に変更することでタイトルが折り返されるようになる。だが現在は、折り返すことが想定されていないため高さも固定となっており、どちらにしても表示が乱れる結果になっている。
バグがないプログラムのつくり方 JavaとEclipseで学ぶTDDテスト駆動開発 (Be agile!)
- 作者: 川端光義,倉貫義人,兒玉督司
- 出版社/メーカー: 翔泳社
- 発売日: 2004/09/22
- メディア: 単行本
- 購入: 9人 クリック: 162回
- この商品を含むブログ (49件) を見る
- 作者: ボーリスバイザー,Boris Beizer,小野間彰,山浦恒央
- 出版社/メーカー: 日経BP社
- 発売日: 1994/02/26
- メディア: 単行本
- 購入: 6人 クリック: 85回
- この商品を含むブログ (19件) を見る
ライティングソリッドコード―バグのないプログラミングを目指して (マイクロソフトプレスシリーズ)
- 作者: スティーブマグワイア,Steve Maguire,関本健太郎
- 出版社/メーカー: アスキー
- 発売日: 1995/03
- メディア: 単行本
- 購入: 1人 クリック: 143回
- この商品を含むブログ (23件) を見る