フリーを越えたフリー神テーマCocoonでのフォント設定

目次(クリックでジャンプ)

cocoon設定でのフォント設定

管理メニュー」Cocoon設定」全体」タブで「サイトフォント」の文字サイズを「16px」を設定すると、「body」にクラス「fz-16px」が設定される。

上と同じタブで「モバイルサイトフォント」を設定すると、@media screen and (max-width: 480px)のメディアクエリで「page-body」クラスにfont-sizeが設定される

管理メニュー」Cocoon設定」本文」タブで、本文余白の「行の高さ」を設定すると、「entry-content」クラスにline-heightが設定される

上と同じ箇所で「行の余白」を設定すると「entry-content」クラスにmargin-topとmargin-bottomが設定される

最上位のルートに設定

:root{font-size:○px;}

上からの二番目のボディ要素に設定

body{font-size:○px;}

ボディ内の各クラスに設定

ただbodyにフォントを設定しても、「Cocoon設定」に覆されてしまう(fz-○pxが優先される)ので優先設定を記述しないといけない。

body{font-size:○px !important;}

これで子テーマのCSSが優先されます。

幅が480以下になると、Cocoon設定の「モバイルサイトフォント」で設定したフォントの大きさが設定される

@media screen and (max-width: 480px)
.page-body というクラスに設定されている

子テーマのCSSの最後にメディアクエリがあるので設定する

@media screen and (max-width: 480px){body{font-size:○px;}}

ただ、やはりCocoon設定が優先されるので、!important をつける。