CSS用クラス名一覧(セレクタ)
ページ全体を囲むdivに付与しているクラスパンくずリストに応じたクラスヘッダーに付与しているクラスカバー画像のimgに付与しているクラスコンテンツを囲むクラスタイトルエリアタイトル部のページアイコンパンくずリストページタイトル日付セクション区切りをしたコンテンツを囲むdivシェアボタンフッターコンテンツ内で指定してあるクラス一覧テキストテキストカラーテキスト背景色テキスト装飾コード数式コールアウトコールアウト テキストカラーコールアウト テキスト背景色ページリンクブックマーク画像などのアセット目次カラムToggleリストテーブルギャラリー
ページ全体を囲むdivに付与しているクラス
全体を囲むdivにはクラスが付与されており、さらにそれぞれのページに対して個別のクラスが付与されています。
トップページには クラスが付与されています。
パーマリンクを設定したページにはそのパーマリンクのURL文字列が のような形で適用されます。パーマリンクを指定していない場合にはURLにもなっているページIDが割り当てられます。
パンくずリストに応じたクラス
全体を囲むdivにはパンくずリストに応じた から始まるクラスも付与されています。
例えば、トップページ配下のblogページ配下の個別ページにスタイルを当てたい場合にはこのようなcssを書けば適用できます。
ヘッダーに付与しているクラス
基本 .headerは画面幅いっぱいなので、.header__contentsWrapperを利用してコンテンツと横幅を揃えられます。
カバー画像のimgに付与しているクラス
コンテンツを囲むクラス
タイトルエリア
.contents内で
- ページアイコン
- パンくずリスト(階層リスト)
- ページタイトル
- ページ日時
を含むタイトルエリアを囲むsectionおよびdivに付与されるクラスです。
.titleSectionは画面幅いっぱいなので、.titleSection__contentsWrapperを利用してコンテンツと横幅を揃えられます。
タイトル部のページアイコン
パンくずリスト
タイトル上部と、コンテンツ下部のどちらも同じCSSクラスが指定されます。
ページタイトル
h1に付与されるクラスです。
日付
の中に と が入ります。日付だけ表示したい場合は へ を指定してください。
セクション区切りをしたコンテンツを囲むdiv
見出しや区切り線に合わせてセクションを分けるWraptasの独自機能を利用した時にセクションごとに付与されるクラスです。
.separatedSectionは画面幅いっぱいなので、.separatedSection__contentsWrapperを利用してコンテンツと横幅を揃えられます。
シェアボタン
SNSへのシェアリンクボタンです。現在はTwitterのみ対応したいます。
フッター
.footerは画面幅いっぱいなので、.footer__contentsWrapperを利用してコンテンツと横幅を揃えられます。