lowlowlow!

質の高い記事なんて書けないですっ!

レスポンシブルーのアーカイブページで日付の表示が変になる!対策は?【はてなブログのテーマ】

このブログ「lowlowlow」は、今まではre::design by mntoneというテーマを使っていたのですが・・・デザインは気に入っていたのですが、サイドバーにアドセンス広告300×600サイズのワイドスカイスクレイパーを使おうと思うとサイドバーの横幅が足りないという悩みがありました。

そこで今回は、はてなブログのテーマをmntoneさんの「re::design」からsatotaka99さんの「レスポンシブルー」に変えてみたのですが少しだけ困った問題が生じてしまったのです。

レスポンシブルーのデザイン自体は凄く気に入っていますし、サイドバーへ「300×1050」のアドセンス広告やワイドスカイスクレイパーを追加してもWebデザインが崩れることもないので当初は問題無しと認識していたのです。

しかし実際に使っているとカテゴリーや月別のアーカイブページで日付が記事タイトルにかぶさるという不具合が生じているのを見つけてしまったのです。

カテゴリーやアーカイブページはそれほど多く見られていないので大きな問題にはならないのですが、やはり気持ち悪さを持ったままブログを更新していかなければならないですしSEO的にもデメリットが出そうですので何か対処法がないものかと探してみることにしたのです。

レスポンシブルー日付表示の不具合

実際にレスポンシブルーをインストールしてみればわかると思いますが、月別アーカイブページを表示してみると日付の「日」の部分がブログ記事のタイトルと重なるようにして被さってしまってキチンと見えなくなってしまう現象が起きてしまうのです。

それでも全くタイトルが見えないというわけでもないですので放置しておいても良かったのですが、SEO的にはGoogleからペナルティを食らう危険性もあるようですので対処法を施してみることにしたのです。

アーカイブページ日付表示の不具合対策方法

それでは、はてなブログのレスポンシブルーテーマでカテゴリとアーカイブページで日付表示が崩れることに対する修正方法ですが・・・

次のCSSをデザインCSSの欄に追加すると治るという情報を得ました。(引用 はぴらき合理化幻想

.archive-entries .date {
  width: 6em;
}

これで問題は解決するんだなーと思って再び自分のブログを確認してみると・・・なんと治っていないではありませんか??

しかしこの方法を試した他の方達は「治った!」とか「解決した!」と報告しているようですので何か可怪しいと感じていたのです。

レスポンシブルーの不具合はブラウザ毎に違う

私は普段はGoogle製のChromeというブラウザを使っているのですが、念の為にと思って他のブラウザでも確認してみることにしたのです。

すると、Operaでは同じく日付部分の表示が崩れてしまっていました。

ところがFirefoxを使ってみると、なんと正常に表示されているではないですか!!??

Apple製のSafariで試してみると、治ってはいませんでした。

IEでもダメ。

そういうことでFirefoxでしかキチンと表示されていないということになるわけなんですね。

ところが先ほどの解決方法を参考にさせていただいた「はらぴき合理化幻想」さんではChromeで確認したということですので、結果的には????ということになりました。

これはiPadやアンドロイドタブレットなどでも同様でしたので何が原因なのかわからないままということになっています。

皆さんが治っているのに私の環境では解決しないということが不思議でなりません。

まとめ

今回は「レスポンシブルーのアーカイブページで日付の表示が変になる!対策は?【はてなブログのテーマ】」ということで はてなブログテーマの不具合や問題に関して書いてみましたが・・・

誰か決定的な解決方法をご存知の方は、ぜひ教えて下さい!お願いいたします!