コメントをTooltipのように表示するCSS

右図のように、コメントがつくとユーザーアイコンだけが一覧表示され、アイコンにマウスをかざすとコメント内容を表示するようにするCSS。初期テーマ4つのデザインのスタイルと組み合わせて使う場合は、以下のスタールシート下部で、ご利用中のテーマ名の部分のコメントアウトをはずすと綺麗に表示されるようになるはず。
例えば、パーマリンクはこれまで通りで、一覧の時だけコンパクトにしたいのでこれを適応したいという場合は、全てのセレクタの頭に「.page-index 」を入れる事でパーマリンクは通常通りに表示できる。
ちなみに、結構激しいCSSになったので、各種ブラウザでの細かい表示確認は行っていない。

.comment-box {
  font-size: 12px;
  position: relative;
  height: 24px;
}

.comment {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment li {
  position: absolute;
  height: 20px;
  width: 18px;
  top: 3px;
  left: 0;
  overflow: hidden;
  z-index: 8888;
  font-size: 10pt;
}

.comment li p {
  margin: 0;
  padding: 0;
}

.comment li:hover {
  overflow: visible;
  width: auto;
}

.comment li:nth-child(1)  { left: 150px;}
.comment li:nth-child(2)  { left: 180px;}
.comment li:nth-child(3)  { left: 210px;}
.comment li:nth-child(4)  { left: 240px;}
.comment li:nth-child(5)  { left: 270px;}
.comment li:nth-child(6)  { left: 300px;}
.comment li:nth-child(7)  { left: 330px;}
.comment li:nth-child(8)  { left: 360px;}
.comment li:nth-child(9)  { left: 390px;}
.comment li:nth-child(10) { left: 420px;}
.comment li:nth-child(11) { left: 450px;}
.comment li:nth-child(12) { left: 480px;}
.comment li:nth-child(13) { left: 510px;}
.comment li:nth-child(14) { left: 540px;}
.comment li:nth-child(15) { left: 570px;}
.comment li:nth-child(16) { left: 600px;}
.comment li:nth-child(17) { left: 630px;}
.comment li:nth-child(18) { left: 660px;}
.comment li:nth-child(19) { left: 690px;}
.comment li:nth-child(20) { left: 720px;}

.comment li .comment-user-name{
  width: 20px;
  height: 18px;
  margin-bottom: -26px;
  color: #eee;
  font-weight: bold;
  overflow: hidden;
  font-size: 90%;
  font-family: "helvetica","arial",sans-serif;
}

.comment li .comment-user-name img{
  margin-bottom: 20px;
  border: 1px solid #ddd;
  background: #fff;
  vertical-align: top;
}

.comment li .comment-content{
  background: rgba(0,0,0,0.8);
  padding: 30px 10px 30px 10px ;
  margin-left: -10px;
  color: #ddd;
 -moz-box-shadow: 0 0 6px #bbb;
 -webkit-box-shadow: 0 0 6px #bbb;
  box-shadow: 0 0 6px #bbb;
 -webkit-background-clip:  padding-box;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
  border-radius: 4px;
  opacity: 0;
  min-width: 200px;
}

.comment li .comment-metadata{
  color: #eee;
  opacity: 0.5;
  margin-top: -26px;
}

.comment li .comment-metadata a{
  color: #fff;
  text-decoration: none;
}

.leave-comment-title {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  width: 120px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-family: "helvetica","arial",sans-serif;
  cursor: pointer;
  opacity: 0.7;
  font-size: 14px;
  margin: 0;
 -moz-transition: opacity 0.5s ease;
 -webkit-transition: opacity 0.5s ease;
}

.leave-comment-title: hover {
  opacity: 1;
}

.comment li:hover .comment-user-name{
  height: auto;
  overflow: visible;
}

.comment li:hover .comment-content{
  opacity: 1;
}

/* aero ====================

.comment-box {
  margin-top: 15px;
}

.comment li {
  top: 5px;
}

.leave-comment-title {
  padding: 0 5px;
  width: 120px;
  opacity:1;
}

.comment li .comment-user-name {
  overflow: visible;
  line-height: 24px;
}

.comment li .comment-user-name img.hatena-id-icon{
  padding: 0;
  border: 0;
  margin: 0;
  position: static;
}

.comment li .comment-content{
  margin-bottom: 0;
  margin-top: -28px
}

 ==================== */

/* natural ====================

.leave-comment-title {
  font-size: 12px;
  font-family: 'Josefin Sans','Gill Sans','Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
}

.comment li {
  top: 0px;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.comment li .comment-metadata {
  display: block;
  margin-top: -30px;
}
 ==================== */

/* bordeaux ==================== 

.comment-box {
  margin-top: 10px;
}

.comment li {
  border-left: 0;
  top: 9px;
  margin: 0;
  padding: 0;
}

.comment-user-name {
  display: block;
}

.comment-content, .comment-content p {
  display: block;
  margin: 0;
  padding: 0;
}

.leave-comment-title {
  padding-left: 5px;
  padding-right: 5px;
}

 ==================== */

/* epic ==================== 
.comment-box {
  margin-top: 10px;
}

.comment li {
  border-bottom: 0;
  margin: 0;
  padding: 0;
}

.comment li:nth-child(1) {
  border-top: 0;
}

.leave-comment-title {
  padding: 0;
  width: 130px;
}

.comment-metadata {
  display:block
}

 ==================== */