ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

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

f:id:katamichinijikan:20180721190201p:plain

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

 

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

問題の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;
}

結果

このようになりました。

f:id:katamichinijikan:20180401115816p:plain

当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。