yStandardのCSSカスタマイズ始め方・適用順序

yStandardではざっくりと大枠部分のスタイルは定義してありますが、本文中の見出しなどにはCSSによる装飾をしていません。

それは「自分だけのサイトを作る」ということに重点を置いているので、ぜひ使う人それぞれの個性を込めてほしいという想いでもあります。

ただ、CSSの読み込み方法についてはPageSpeed Insightsで指摘されない形に調整しているため、少しばかりややこしいです…

yStandardを使っているサイトににオリジナルなスタイルを追加する方法について説明します

yStandardのCSSカスタマイズの特徴

yStandardでは、ユーザーが自分で追加したカスタマイズ部分がわかりやすくなるような工夫をしています。

カスタマイズされることを想定したcssファイルはstyle.cssstyle-firstview.cssの2つを用意しています。

しかし、上記2つのファイルにはスタイルに関する記述は何も書かれていません。

テーマ標準のスタイルは/cssディレクトリ以下に配置し、style.cssファイルに何も書かないことで、CSSに自分でカスタマイズした部分がわかりやすくなり、気分に合わせて調整しやすくなると考えています。

yStandardのCSS構造

yStandardでは大きく2つの分類に分けてCSSを読み込んでいます。

  • ファーストビューに関わる部分
  • ファーストビュー以外

ファーストビューに関わる部分

yStandardのファーストビューカスタマイズ用CSS

ファーストビューに関する部分のスタイルはstyle-firstview.cssに記述します。

ページを表示してスクロースせずに見える部分が「ファーストビュー」にあたり、この部分のスタイルはheadタグにインラインで記述しましょう…というのがPageSpeed Insightsでの提案内容です

ファーストビュー以外

ファーストビュー以外の部分…記事中の各HTML要素のスタイリングや、記事下エリアの装飾などはstyle.cssに記述します。

yStandard標準で適用されるスタイルの順序

yStandardのテーマ標準で読み込まれるCSSの適用順序は以下のとおりです(数字が大きい方が優先順位高)

  1. /css/ys-firstview.min.css
  2. テーマカスタマイザーでの設定内容
  3. /style-firstview.css
  4. /css/ys-style.min.css
  5. /style.css

「追加カスタマイズしたい部分は定義済のスタイルを上書きしてしまえ!!」という感覚で作っています。

例えば、strong {…}というスタイルを/css/ys-firstview.min.css/style.cssの2つのファイルに書いた場合、/style.cssに書いた内容が優先されます。

その他のCSSカスタマイズについて

その他のCSSカスタマイズについての情報は随時追加予定です。