早めにやるべきことで見出しのカスタマイズがあることを思い出しました。
やり方はCSSを書き換える。
外観の部分にあると思うですが、下記の部分にCSSを加える形です。
■CSSを追加する
テーマによっていろいろかもですが、共通しているのはこれでしょうか。
・「外観」＞「カスタマイズ」＞「追加CSS」に見出しのCSSをコピペ。
見出しのCSSは、いろいろなサイトに転がっているのでそれをコピペ。
テーマによっては、
・「外観」＞「テーマエディタ※」に見出しのCSSをコピペ。
というやり方もあったと思います。シンプリシテーは、
そうだったと思います。
・Cocoonは、
「外観」＞「テーマエディター」＞「style.css」 からのようです。
もっと簡単な別のやり方があるかもしれませんが。
style.cssの変更は、壊すとおしまいだぞ！的なメッセージが出るのでドキドキです。
■苦労した点
Cocoonは、デフォルトの見出し反映が強く、変えるのに苦労しました。
下記のような見出しのリセットを入れてから「padding:0 ;」の後にCSSを入れる必要がありました。
.entry-content h2{
border:none;
background:none;
padding: 0;
}
また、h5:after {・・・というような２つのパーツを組み合わせて作るような見出しは、デフォルトの見出しがまた蘇ってしまいました。
それは諦めて、デフォルトの見出しが蘇ってきてもデザイン的にOKな「h5」「h6」の見出しで作ってみました。
■白黒だったデフォルト見出しが下記のように変わりました。
※問題が発生しました。「cocoon設定」で「スキン」を変えたところ、見事にタイトル設定がまたダメになってしまいました。見出し2,3,4は、文字色やバックグラウンドを指定して戻ったので、ひとまず良しとしましょう。後日修正します。
見出し2テスト
見出し3テスト
見出し4テスト
見出し5テスト
見出し6テスト
結構、良くできた！ と思っていたのに・・・
コメント