はてなブログテーマ「Cappuccino」「Neumorphism」記事内各種リセットCSS用意しました

どうも！フジグチです！

当サイト製作のテーマをお使いの方が、記事内のカスタマイズをする際にCSS同士が干渉しないように、各種装飾をリセットするCSSをご用意したのでカスタマイズする際にご利用ください。

目次については当サイトでもカスタマイズを紹介しているので、こちらのページも合わせて参考にしてください。

はてなブログ【目次カスタマイズ】コピペで使えるデザイン集

注意事項

注意この記事内には「Cappuccino」と「Neumorphism」のコードが書いてあります。コピーする際は見出しに従い、お間違いのないように注意してください

リセットしたい箇所のコードをコピーしてデザインCSSの/*</system>*/のすぐ下に入れてください。

その下以降に使いたいデザインのCSSを入れてください。

CappuccinoリセットCSS

「目次」の文字を好きな言葉に変える･･･Cappuccino

/***「目次」の文字を好きな言葉に変える***/
.entry-content .table-of-contents::before {
    content:  "ここに表示したい文字を入れる"
}

目次リセット･･･Cappuccino

/***目次リセット***/
.table-of-contents {
    list-style: inherit;
    color: inherit;
    background: none;
    position: static;
    border: none;
    border-radius: 0;
}
.table-of-contents::before, .table-of-contents::after {
    content: none;
    transform: translate(0);
    position: static;
    background: none;
    font-size: inherit;
    letter-spacing: inherit;
    font-family: auto;/*スケッチフォントを使いたい場合はこの行を消してください*/
    top: unset;
    height: auto;
    bottom: auto;
    left: unset;
    color: inherit;
}
.table-of-contents a {
    color: inherit;
    text-decoration: inherit;
}
.table-of-contents li {
    position: static;
}
.table-of-contents ul {
    list-style: inherit;
}
.table-of-contents ul li::before {
    content: none;
    border: none;
    position: static;
}
/***目次リセットここまで***/

h2見出しリセット･･･Cappuccino

/***h2見出しリセット***/
.entry-content h2 {
    background: none;
    padding: 0;
}

h3見出しリセット･･･Cappuccino

/***h3見出しリセット***/
.entry-content h3 {
    border: none;
    padding: 0;
}

h4見出しリセット･･･Cappuccino

/***h4見出しリセット***/
.entry-content h4 {
    background: none;
    padding: 0;
}

見出しまとめてリセット･･･Cappuccino

/***見出しまとめてリセット***/
.entry-content h2, .entry-content h3, .entry-content h4 {
    background: none;
    border: none;
    padding: 0;
}

引用符リセット･･･Cappuccino

/***引用符リセット***/
.entry-content blockquote {
    border: none;
    margin: 0;
    padding: 0;
    background: none;
}
blockquote::before, blockquote::after {
    content: none;
    position: static;
    font-size: inherit;
    color: inherit;
}

コードブロックリセット･･･Cappuccino

/***コードブロックリセット***/
.entry-content pre {
     background: none;
}

NeumorphismリセットCSS

「目次」の文字を好きな言葉に変える･･･Neumorphism

/***「目次」の文字を好きな言葉に変える***/
.table-of-contents::before {
    content:  "ここに表示したい文字を入れる"
}

目次の凹凸（影）を消す･･･Neumorphism

/***目次の凹凸（影）を消す***/
.table-of-contents　｛
    box-shadow: none;
｝

h2見出しリセット･･･Neumorphism

/***h2見出しリセット***/
.entry-content h2 {
    padding: 0;
    border: none;
}

h3見出しリセット･･･Neumorphism

/***h3見出しリセット***/
.entry-content h3 {
    border: none;
}

h4見出しリセット･･･Neumorphism

/***h4見出しリセット***/
.entry-content h4 {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

見出しまとめてリセット･･･Cappuccino

/***見出しまとめてリセット***/
.entry-content h2, .entry-content h3, .entry-content h4 {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

引用符リセット･･･Neumorphism

/***引用符リセット***/
.entry-content blockquote {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.entry-content blockquote::before {
    content: none;
    position: static;
    font-size: inherit;
    color: inherit;
    text-shadow: none;
}

コードブロックリセット･･･Neumorphism

/***コードブロックリセット***/
.entry-content pre {
    background: none;
    box-shadow: none;
    border: solid 1px #aaa;
    border-radius: 0;
}

以上になります。

カスタマイズのお役に立てば幸いです。