レスポンシブルーの日付表示問題を修正しました

気づいていて無視していたのですが、はてなブログのテーマであるレスポンシブルーにはアーカイブ表示（タグで絞り込んだり、年月で絞り込んだ時）をした時に日付表示がタイトルにかぶってしまう問題がありました。

早速直そうと検索してみると、上位数件を占めるのが対策失敗の記事でしたので、自分で対策してみました。ただし、素人対策なので美しさを求める人は自分でやってください。

問題のCSS

ソースコードから日付表示の部分を抜き出すとこのように記述されています。

<div class="archive-entry-header">
 <div class="date archive-date">
 <a href="アーカイブURL" rel="nofollow">
 <time datetime="年月日" title="年月日">
 <span class="date-year">年</span><span class="hyphen">-</span><span class="date-month">月</span><span class="hyphen">-</span><span class="date-day">日</span>
 </time>
 </a>
 </div><h1 class="entry-title">
 <a class="entry-title-link" href="記事URL">タイトル</a>
 </h1>
</div>

レスポンシブルーのCSSを見ると、このように。

/* 日付 */
.date {
font-weight: bold;
background: none repeat scroll 0 0 #393e40;
border-radius: 50% 50% 50% 50%;
color: #ffffff;
height: 4.8em;
line-height: 1.2;
margin: 0 0 0 -88px;
position: absolute;
text-align: center;
top: -0.9em;
width: 4.8em;
}
.date a {
 color: #ffffff;
 text-decoration: none;
} .date-year {
left: 1.3em;
position: relative;
} .hyphen {
display: none;
} .date-month {
font-size: 1.2em;
position: relative;
right: 1.3em;
top: 1.1em
} .date-day {
font-size: 1.6em;
position: relative;
right: 1em;
top: 1.6em;
}

https://blog.hatena.ne.jp/-/theme/11696248318753242429.css

対策

ということで、手っ取り早くアーカイブ表示ではおしゃれ表示をやめましょう。

デザイン > デザインCSSに以下のコードを追記しました。

.archive-entries .archive-date {
width:10em;
margin-bottom:0.5em;
margin-left:-0.7em;
border:2px solid #393e40;
border-radius:5px;
padding:0.5em 0;
}
.archive-entries .date-year {
 font-size: 1.2em;
left:0;
}
.archive-entries .hyphen {
 font-size: 1.2em;
display: inline;
}
.archive-entries .date-month {
 font-size: 1.2em;
top:0;
right:0;
}
.archive-entries .date-day {
 font-size: 1.2em;
top:0;
right:0;
}

結果

このようになりました。