求人サイトの外観は主に2か所から変更できます。
カスタマイザー（管理画面 > カスタマイザー）では、テーマカラー・メインビジュアル・カスタムCSSをリアルタイムプレビューで調整できます。
サイト設定 > デザイン設定では、ロゴ・ファビコン・OGP画像などの画像ファイルを管理します。いずれもコードを直接編集せずに対応できます。
テーマカラー
テーマカラーはサイト全体のCSS変数に反映されます。カスタマイザーでリアルタイムプレビューを確認しながら調整できます。設定項目は以下のとおりです。
| 設定項目 | 反映箇所 |
|---|---|
| メインカラー | ボタン・リンク・アクセント要素など主要な色 |
| サブカラー | 補助的なUI要素 |
| アクセントカラー | 強調表示・バッジ等 |
| 文字色 | 本文の基本文字色 |
| 補助文字色 | 説明文・キャプションなど補助的な文字色 |
| リンク色 | テキストリンクの色 |
| リンクホバー色 | テキストリンクにマウスを乗せたときの色 |
| 背景色 | ページの基本背景色 |
| 補助背景色 | セクション背景・カード背景など補助的な背景色 |
| ヘッダー背景色 / 文字色 | サイトヘッダー |
| フッター背景色 / 文字色 | サイトフッター |
ロゴ・ファビコン・OGP画像
各画像の用途と推奨サイズは以下のとおりです。
| 設定項目 | 用途 | 推奨サイズ |
|---|---|---|
| ロゴ | ヘッダーに表示されるサイトロゴ | 横長のSVG・PNG推奨 |
| フッターロゴ | フッターに表示されるロゴ（未設定時はロゴと同じ） | 同上 |
| ファビコン | ブラウザのタブに表示されるアイコン | .ico または .png（32×32px） |
| タッチアイコン | スマートフォンのホーム画面に追加した際のアイコン | PNG（180×180px） |
| OGP画像 | SNSシェア時のサムネイル画像 | 1200×630px |
OGP画像はSNSでシェアされた際に表示される画像です。各ページで個別に設定していない場合はここで設定した画像が使われます。横1200px・縦630pxより小さい画像は、SNSプラットフォームによっては表示されない場合があります。
ファーストビュー
トップページのファーストビューは「スライドショー」と「メインビジュアル」のどちらかを選択します。設定で切り替えると、もう一方の設定内容は保持されたまま非表示になります。
- スライドショー：複数の画像を順番に切り替えて表示。スライドショー管理から画像・リンク・表示順を設定する
- メインビジュアル：1枚の背景画像にキャッチコピーとCTAボタンを重ねて表示。リードコピー・キャッチコピー・ボタンラベル・リンク先を設定する。画像にオーバーレイ（暗幕）をかけるかどうかも設定できる
メインビジュアルでは、「サイト実績」や「クイック検索」を配置できるため、よりオリジナル性のある表現が可能になります。
画像の自動リサイズ
求人アイキャッチ・ギャラリー・企業ロゴ・会員証明写真などは、アップロード時にシステムが設定したサイズに自動でリサイズします。
リサイズ後のサイズはサイト設定の「画像サイズ設定」で変更できますが、変更は新規アップロード分からのみ適用されます。既存の画像は変更されません。
カスタムCSS
テーマカラーやウィジェット設定で対応できない細かいデザイン調整は、カスタマイザーの「カスタムCSS」セクションに直接CSSを記述することで対応できます。
記述したCSSはすべてのページに適用されます。テーマの更新時に上書きされないため、独自のスタイル調整を永続させるための場所として使います。
※CSSの記述を間違えると、求人サイトのデザイン全体に影響します。ご注意ください。