テーマNaked用の記事です。
見出しをオリジナルのものに変えたい!という方もいると思うので、見出しのデザインをキャンセルする方法を書きたいと思います。
もとから書かれているデザイン
Nakedはデフォルトの状態でも使えるように、見出しもデザインが組まれています。どのように組まれているかは、サンプル記事
を見てもらうと分かります。
このデザインにするために、もとから書かれている見出しのcssは
.entry-content h1 { margin: 36px -32px 20px -32px; padding: 20px 5px 20px 20px; border-left: 5px solid #444; color: #444 ; font-size: 20px ; font-weight: bold; line-height: 1.4; letter-spacing: 2px; } .entry-content h2 { margin: 36px -32px 20px -32px; padding: 20px 5px 20px 20px; background-color: #444; color: #fff ; font-size: 20px ; font-weight: bold; line-height: 1.4; letter-spacing: 2px; } .entry-content h3 { margin: 32px -32px 20px -32px; padding: 12px 16px; border-left: 6px solid #444; background-color: #f6f6f6; color: #444; font-size: 20px; font-weight: bold; line-height: 1.4; letter-spacing: 1px; } .entry-content h4 { margin: 28px -16px 20px -16px; padding: 0 12px; border-bottom: 10px solid #f6f6f6; font-size: 18px; font-weight: bold; line-height: 1.4; letter-spacing: 1px; } .entry-content h5 { position: relative; margin: 28px 0 20px 16px; color: #444; font-size: 16px; font-weight: bold; line-height: 1.4; } .entry-content h5::before { position: absolute; top: -webkit-calc(50% - 4px) ; top: calc(50% - 4px); left: -16px; border: 5px solid #444; content: ''; } .entry-content h6 { margin: 28px 0 20px 0; font-size: 16px; font-weight: bold; line-height: 1.4; } @media screen and (max-width: 680px) { .entry-content h1 { margin: 30px -5px 20px -5px; padding: 15px 5px 15px 10px; border-left: 5px solid #444; color: #444 ; font-size: 16px; letter-spacing: 0; } .entry-content h2 { margin: 30px -5px 20px -5px; padding: 15px 5px 15px 10px; background-color: #444; color: #fff; font-size: 16px; letter-spacing: 1px; } .entry-content h3 { margin: 30px -5px 20px -5px; padding: 10px; border-left: 5px solid #444; background-color: #f6f6f6; color: #444; font-size: 16px; letter-spacing: 0; } .entry-content h4 { margin: 20px 0 16px 0; padding: 0; border-bottom: 10px solid #f6f6f6; font-size: 16px; letter-spacing: 0; } .entry-content h5 { position: relative; margin: 20px 0 16px 16px; color: #444; font-size: 16px; } .entry-content h6 { margin: 20px 0 16px 0; font-size: 16px; } }
となっています。
見出しをキャンセルする
自分で見出しのデザインに変更したい場合は、上のCSSをキャンセルする必要があります。
キャンセルする方法は、一旦「デザインCSS」に
.entry-content h1 { margin: 36px 0 20px 0; padding: 0; border: none; letter-spacing: 0px; } .entry-content h2 { margin: 36px 0 20px 0; padding: 0; background-color: #fff; color: #444; letter-spacing: 0px; } .entry-content h3 { margin: 32px 0 20px 0; padding: 0; border: none; background-color: #fff; color: #444; letter-spacing: 0px; } .entry-content h4 { margin: 28px 0 20px 0; padding: 0; border: none; letter-spacing: 0px; } .entry-content h5 { margin: 28px 0 20px 0; } .entry-content h5::before { display: none; } .entry-content h6 { margin: 28px 0 20px 0; } @media screen and (max-width: 680px) { .entry-content h1 { margin: 30px 0 20px 0; font-size: 20px; } .entry-content h2 { margin: 30px 0 20px 0; font-size: 19px; } .entry-content h3 { margin: 30px 0 20px 0; font-size: 18px; } .entry-content h4 { margin: 20px 0 16px 0; font-size: 17px; } .entry-content h5 { margin: 20px 0 16px 0; font-size: 16px; } .entry-content h6 { margin: 20px 0 16px 0; font-size: 15px; } }
と入れてみてください。すると見出しが
PC
スマホ
のように、余白が整った状態で装飾がキャンセルされます。
この後に、ご自身が導入したい見出しのCSSを、同じく「デザインCSS」の下に貼り付けてください。(CSSは、基本的に下に書いたものが優先し、上に書いたものを上書きする性質があります)