ページ全体を囲むdivに付与しているクラス

全体を囲むdivにはpageクラスが付与されており、さらにそれぞれのページに対して個別のクラスが付与されています。

トップページには page-_top クラスが付与されています。

パーマリンクを設定したページにはそのパーマリンクのURL文字列が page-about　のような形で適用されます。パーマリンクを指定していない場合にはURLにもなっているページIDが割り当てられます。

/* ページ全体を囲むdivに付与されているクラス */
.page {
}
/* トップページの場合のページ全体を囲むdivに付与されているクラス */
.page.page-_top {
}
/* パーマリンクでurlを/aboutと指定したURLの場合のページを囲むdivに付与されているクラス */
.page.page-about {
}
/* (トップページとパーマリンク以外で)特定のページのpageId:abcdefg12345678 の場合のページ全体を囲むdivに付与されているクラス */
.page.page-abcdefg12345678 {
}
/* 特定のページのpageId:abcdefg12345678 の場合のページ全体を囲むdivに付与されているクラス */
.page.page_id-abcdefg12345678 {
}

パンくずリストに応じたクラス

全体を囲むdivにはパンくずリストに応じた pageMap から始まるクラスも付与されています。

/* トップページ */
.pageMap__top {
}
/* トップページ配下のパーマリンクがblogのページ */
.pageMap__top_blog {
}
/* トップページ配下のページIDがabcdefg12345678のページ */
.pageMap__top_abcdefg12345678{
}
/* トップページ配下でないページ */
.pageMap_abcdefg12345678{
}
/* トップページ配下でないパーマリンクがnewsのページ */
.pageMap_news{
}
/* トップページ配下でないパーマリンクがnewsのページの配下のページ */
.pageMap_news_abcdefg12345678{
}

例えば、トップページ配下のblogページ配下の個別ページにスタイルを当てたい場合にはこのようなcssを書けば適用できます。

.page[class*="pageMap__top_blog_"] .title {
}

ヘッダーに付与しているクラス

基本 .headerは画面幅いっぱいなので、.header__contentsWrapperを利用してコンテンツと横幅を揃えられます。

/* ヘッダー全体を囲むクラス */
.header {
}
/* ヘッダーのコンテンツを囲むクラス */
.header__contentsWrapper {
}
/* ヘッダーの画像やサイトタイトル、パンくずリストを囲むクラス */
.header__logoArea {
}
/* ヘッダーのパンくずリストを囲むクラス */
.headerBreadcrumb {
}
/* サイトタイトルを囲むリンク */
.header__link {
}
/* サイトタイトルを画像にした場合のクラス */
.header__img {
}
/* ボタンを設置した際の、ボタン全体を囲むdiv */
.header__btns {
}
/* ボタン個別のクラス */
.header__btn {
}
/* スマートフォンの場合のハンバーガーボタン */
.header-btn-menu {
}
/* スマートフォンの場合のハンバーガーボタンで開かれるメニュー */
.header__menu {
}
/* スマートフォンの場合のハンバーガーボタンで開かれるメニュー項目 */
.header__menuBtn {
}

カバー画像のimgに付与しているクラス

.coverImage {
}

コンテンツを囲むクラス

/* ヘッダーとカバー画像を除いて、コンテンツとフッターまで囲うdiv */
.container {
}
/* .container内でフッターを除いた部分を囲うdiv */
.contents {
}

タイトルエリア

.contents内で