フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

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

はてなブログテーマCappuccinoリセットCSS

どうも!フジグチです!

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

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

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

注意事項

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

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

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

CappuccinoリセットCSS

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

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


目次リセット・・・Cappuccino

/***目次リセット***/
.entry-content .table-of-contents {
    list-style: inherit;
    color: inherit;
    background: none;
    position: static;
    border: none;
    border-radius: 0;
}
.entry-content .table-of-contents::before, .entry-content .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

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


目次の凹凸(影)を消す・・・Neumorphism

/***目次の凹凸(影)を消す***/
.entry-content .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;
}


以上になります。

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

トップへ戻る