ゴミ箱の中のメモ帳

まだ見ぬ息子たちへ綴る手記

はてなブログ グループ ブログタイトルが折り返されない不具合

前の記事に書いた「はてなブログ グループ スクロールの不具合」は不具合の可能性が高いが、今回の記事は意図的な可能性がある。

だが一応報告のために記事を書く。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)


不具合画像

f:id:mon0:20130918042241p:plain

この画像の通り、ブログタイトルがサイドメニューにも重なって表示されてしまう。
この画像では、コンテンツのブログタイトルとサイドメニューの参加ブログ一覧のタイトルとが重なってしまい非常に読みづらくなってしまっているが、ブログタイトルが枠を超えて表示されているのがわかるかと思う。

再現方法

ブログタイトルの長いブログを作成し、任意のグループに参加する。そして、グループ個別ページより作成したブログを一覧に表示させる。
この結果、ブログタイトルが折り返されずに表示される。これが意図的な表示だとすれば、サイドメニューに文字が重なるのは文字が読みづらく、また、タイトルの下にあるリンクが選択しづらくなる。そのため、要望として折り返して表示させるか、本文のように三点リーダを使い省略して表示されることを望む。

原因

ブログタイトルは以下のように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!)

バグがないプログラムのつくり方 JavaとEclipseで学ぶTDDテスト駆動開発 (Be agile!)

ソフトウェアテスト技法

ソフトウェアテスト技法