スタイルシートをカスタマイズしてみよう

2020年11月24日

クローバ PAGEで、トップページのデザインをスタイルシートでカスタマイズされているサイトが多く見られるようになってきました。今回はスタイルシートのカスタマイズにおける注意点と、サンプルコードをいくつか紹介してみたいと思います。

ボイラープレートについて

クローバ PAGEではアップデート時にHTMLの構造が変更されることがあります。これらの変更により、スタイルシートでカスタマイズしているサイトが影響を受ける場合があります。変更を受けにくいカスタマイズを行っていただくために、安全に利用できるセレクタをまとめたボイラープレートを公開しました。

qloba/stylesheet

利用できるセレクタは以下のとおりです。

デザインテーマのクラス（「theme-」から始まるクラス）
パーツのID（「text-2」や「section-5」などパーツ名のプリフィクスの後に数値が続くID）
その他ボイラープレートに記載されているクラス

以下のセレクタはアップデート時に変更される場合がありますので、使用しないでください。

ユーティリティクラス（_mt-8など、先頭がアンダースコア「_」で始まるクラス）
パーツ以外のID

その他の注意点

トップページ以外のスタイルのカスタマイズ（記事、コミュニティなど）は推奨していません（サイドバーを除く）。
フォーム画面にはスタイルシートは読み込まれません。

スタイルシートカスタマイズのサンプル

カバー画像を画面いっぱいに表示する

.hero--fitted {
  padding-top: 0;
  height: calc(100vh - 56px);
}
/* サブ画像 */
.hero__sub-image {
  max-height: 80vh;
  max-width: 80%;
}

縦いっぱいに表示する場合は、1600 x 1080ピクセルの画像がおすすめです。

ヘッダーの背景色を変更する

/* ヘッダーを黒にする */
.site-header__container {
  background-color: #000;
  color: #fff;
}
/* ヘッダーのアイコンを白にする */
.site-header__menu-item-icon,
.site-header__submenu-item-icon {
  color: #fff;
}
.site-header__menu-item-icon:hover,
.site-header__submenu-item-icon:hover {
  color: #ccc;
}