1more!

+1 Lifestyle Blog. 趣味を多方面に愉しむブログ。

【Ï】はてなブログで、PC版/スマートフォン版のCSSによる表示崩れを回避する方法。

スポンサーリンク

photo credit: JD Hancock via photopin cc

どうも!Hayabusa(@hayabusa_823z)です。今回は、昨日の記事「ブログ改造記8」において発生していた表示崩れの解決策が見つかったので、カスタマイズのメモとして残しておこうと思います。

ブログ説明文の表示が崩れる?

昨日の記事のとおり、ブログの表示軽量化の実験として、タイトル部分の画像を試験的にスタイルシートによる表示にカスタマイズしています。

【Ï】ブログ改造記8「タイトルとWebフォント。」 - 1more!
photo credit: Ravages via photopin ccどうも!Hayabusa(@hayabusa_823z)です。 毎回お送りしているブログカスタマイズ備忘録の第8弾です。表示...

この時に記事でも指摘しているようになぜかトップページ以外のアーカイブを開いたブログ説明文の部分に、見出しのh2タグスタイルシートの書式が適用されてしまっている問題が発生していました。

原因

試行錯誤した結果、以下の状況の際にスタイルシートの要素がか干渉していることがわかりました。

  • PC版ではデザインCSSスマートフォン版向けでは、記事下のカスタマイズで、styleタグで挟んで両方に同じスタイルシートの書式を記述した状況

  • この状況で、h1-h5までのタグの見出しのスタイルシートを弄って実験してみると、

    • h1タグ→記事タイトルの書式(.entry-title)と干渉する
    • h2タグ→スマートフォンフォン版は問題なく表示されるがPC版表示においてブログ説明文(.blog-discroption)と干渉する
    • h3タグ→PC版は問題なく表示されるものの、スマートフォン版の記事詳細表示で、記事タイトル(.entry-title)と干渉する。

ということが分かりました。

回避・解決策

結論として、h4タグとh5タグのみが、スタイルシートの書式を適用させる際に、両表示モードでも表示崩れや干渉が起きないので、これを設定したところ、無事問題が解決しました。
表示が安定せず見苦しい点があったことをお詫びします。

このまましばらく見出しの部分は弄らずに、今後は微調整に留めていこうと思います。