読者です 読者をやめる 読者になる 読者になる

MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログの .entry-footer は難しい

はてなブログのテーマを制作していて、「気が利かないなあ」と思うのが entry-footer 周りの仕様。

<footer class="entry-footer">
    <p class="entry-footer-section"></p>
    <div class="hatena-star-container"></div>
    <div class="hatena-star-metadata"></div>
    <div class="social-buttons"></div>
    <div class="customized-footer"></div>
    <div class="comment-box">
        <ul class="comment"></ul>
        <a class="leave-comment-title"></a>
    </div>
</footer>

ソーシャルボタンを囲う親要素である .social-buttons と、「記事下のカスタマイズ」の親要素である .customized-footer、そしてコメントの親要素である .comment の仕様に不満がある。

  • .social-buttons は、ソーシャルボタンを1つも表示しない設定にしても挿入される
  • .customized-footer は、「記事下のカスタマイズ」を使用しなくても挿入される
  • .comment は、コメントが0件でも挿入される

つまりこの3つの要素は空divになりうる。空divに margin や padding を指定すると不自然な空白ができてしまうので、子要素を内包する場合としない場合とで同じ見た目にするのが難しい。

該当する機能を使わない時は件の要素を挿入しないか問題の要素 にインラインで display: none を指定してくれるとありがたいんだけど…。

広告を非表示にする