新しくブログのデザインを作り直す際に、ほぼ全てmarginとpaddingをリセットしました。その際にできたリセット用のCSSを備忘録。Cocoonの子テーマにコピペして使ってください。
おそらくリセット残しがあると思うので、見つけたら各々で書き足す感じでお願いします！
使うとこんな感じになります
余白リセットCSS
子テーマのスタイルシートにコピペする際は、他の記述よりも上にコピペしてください。コメントされなければ表示されない返信ボタン等の余白もリセットされるのでデザイン残しが無いようご注意を。
記事本文内のラベルボックス等の余白は!importantを付けないと適応されない場合がありますが、クラス名の前に.bodyを付けることで通常の記述で余白を付けることができます。
以下、余白のリセットCSSになります。
/************************************
** 余白リセット
************************************/
.content,.main,.sidebar,#list,.list-wrap,.footer,.tagline,.logo-text,.header-container-in.hlt-top-menu .logo-text,.list-title,.list-title-in,.list-title-in:before,.list-title-in:after,.a-wrap,.entry-card-thumb,.cat-label,.related-entry-card-content, .entry-card-content,.related-entry-card-title, .entry-card-title,.related-entry-card-snippet, .entry-card-snippet,.post-date, .post-update, .post-author, .amp-back, .entry-category,.e-card-info,.body .list .widget-entry-cards > span,.body .list .widget-entry-cards,.widget-entry-cards .a-wrap,.entry-card-thumb, .author-thumb, .blogcard-thumbnail, .related-entry-card-thumb, .popular-entry-card-thumb, .new-entry-card-thumb,.card-arrow .card-content,.widget-entry-card-content,.list-more-button,.entry-content>*,.mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap,.body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond ,.sidebar h2, .sidebar h3,.nwa .author-box .author-thumb,.nwa .author-box .author-content,.author-box .author-name,.author-description,.author-box p,.sns-follow-message, .sns-share-message,.sns-buttons,.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a, .widget_block ul li a,.tagcloud a,.tagcloud a .tag-caption .tax-icon,.footer-bottom,.site-name-text-link,.copyright,.entry-categories-tags,.cat-link,.entry-categories-tags > div,.entry-categories-tags .tax-icon,.entry-title, .archive-title,.eye-catch,.ss-top,.sns-buttons a,.sns-share.ss-high-and-low-lc a > span,.date-tags,.pr-label-l,.entry-content,.sbp-l:not(.not-nested-style) .speech-balloon,.toc-title,.toc-title::after,.toc-checkbox:checked~.toc-content,.article h2, .article h3, .article h4, .article h5, .article h6,.blogcard,.blogcard-label,.blogcard-label .fa::before,.blogcard-content,.blogcard-title,.blogcard-footer,.blogcard-favicon,.article ul li, .article ol li,.body div.scrollable-table table, .body .wp-block-table table,.wp-block-table td, .wp-block-table th,.is-style-information-box::before, .is-style-question-box::before, .is-style-alert-box::before, .is-style-memo-box::before, .is-style-comment-box::before, .is-style-ok-box::before, .is-style-ng-box::before, .is-style-good-box::before, .is-style-bad-box::before, .is-style-profile-box::before, .information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before,.blank-box.bb-tab .bb-label,.blank-box.bb-tab .bb-label .fa,.label-box-label,.label-box-content,.tab-caption-box-label,.tab-caption-box-content,.toggle-button,.toggle-wrap .toggle-content,.toggle-button::before,.body blockquote :last-child, .body .column-left :last-child, .body .column-center :last-child, .body .column-right :last-child, .body .timeline-box :last-child,.body .blogcard-type :last-child, .body .btn-wrap :last-child, .is-content-justification-center, .is-content-justification-right, .is-content-justification-space-between,.is-layout-flex :last-child,.body .wp-block-categories,.body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar,.body .ad-area,.body .wp-block-gallery, .body .wp-block-audio,.body .wp-block-cover,.body .wp-block-file,.body .wp-block-media-text,.body .wp-block-video,.body .wp-block-buttons,.body .wp-block-columns,.body .wp-block-separator,.body .components-placeholder,.body .wp-block-search,.body .wp-block-social-links,.body .timeline-box,.body .blogcard-type,.body .btn-wrap,.body .btn-wrap a,.body .block-box,.body .wp-block-embed,.body .wp-block-group,.body .wp-block-table, .body .scrollable-table,.body .wp-block-separator,.body .wp-block,.body .wp-block-media-text__content :last-child,.body .wp-block-columns :last-child,.body .wp-block-cover :last-child,.body .wp-block-group:not(.is-content-justification-left),.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
margin: 0;
padding: 0;
}
@media screen and (max-width: 1023px) {
main.main, div.sidebar {
margin: 0;
padding: 0;
}
}使う人いるか分かりませんが誰かのお役に立てれれば幸い！
コメント