MemoRandum

ゲーム / エンタメ / 自由業

「Pallete」でH5タグのデザインをリセットする方法&オススメのCSSデザイン参考サイト紹介

www.bambi.pro

自分でHタグをデザインしたい場合、Palleteのカスタマイズページにはリセット用のタグが用意されていますが、H5(小見出し)のものはリセット用CSSとして機能していません。

2019/02/26 追記 修正されたようです。

Palletteの初期H5タグCSSを正しくリセットする方法を紹介したいと思います。

PalleteのH5デザインをリセットするCSS

/*h5 小見出し リセット*/  
.entry-content h5:before,  
.entry-content h5:after{display:none;}
.entry-content h5{display:block;}

元々のデザインでは要素の前後に文字を追加で表示するために:beforeや:afterなどの疑似要素と呼ばれるものを使っています。また疑似要素の表示位置を調整するために、ブロック要素であるHタグをインラインブロック要素に変えるCSSも記述されています。

用意されているリセット用CSSは、疑似要素を非表示にはできますが、H5タグを本来のブロック要素に戻す記述がありません。おそらく書き忘れだと思います。なので、display:blockを書き加えたものがこちらになります。

デザインCSSにこのリセットCSSを記述し、リセットCSSよりも下に本来適用したいCSSを記述すればそちらが適用されます。

また最後をセミコロンでしめないのは賛否あると思いますが、テーマ元の記述に従って当ブログのPallete関連記事ではなるべく最後はしめない表記にしています。個人的にはしめる派なのですが。というか能動的な考えでもってしめていない方ってこの世に存在してるのでしょうか?

最後に

Palleteのカスタマイズ記事は下記ページにまとめております。是非ご覧ください。

qqo.randumemo.com